
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="keywords" content="CSS重定义" />
		<meta name="description" content="重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。" />
		<title>CSS,CSS重定义-拼图Pintuer</title>
		<link href="pintuer.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
		<script src="jquery.js"></script>
		<script src="pintuer.js"></script>
		<script src="respond.js"></script>
		<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />
		<link href="favicon.ico" rel="bookmark icon" />
	</head>

	<body>

		<div class="container">
			<div class="line">
				<div class="xl12 xs12 xm9 xb9">
					<!--list.start-->
					<div class="doc-right">
						<h2 class="doc-h2" id="overview">
                        概述
                    </h2>
						<p class="doc-lead">
							拼图跨屏响应式前端框架，针对常用的CSS基本重新定义，使其更符合实际应用，更适合中文的字符效果。
						</p>
						<h3 class="doc-h3" id="html5">
                        HTML5文档
                    </h3>
						<p class="doc-readme">
							拼图前端框架部份效果需要采用HTML5文档格式，使用拼图前端框架需要采用HTML5的文档类型：
						</p>
						<div class="doc-code">
<xmp>
<!DOCTYPE html>
<html lang="zh-cn">
...

</html>
</xmp>
						</div>
						<h3 class="doc-h3" id="mobile">
                        移动设备优先
                    </h3>
						<p class="doc-readme">
							拼图前端框架针对移动设备做了友好开发，使项目在移动设备上有良好的表现，及优秀的用户体验。
						</p>
						<div class="doc-input">
							为了确保适当的绘制和触屏缩放，需要在

							<head>
								之中添加viewport元数据标签。
						</div>
						<div class="doc-code">
<xmp>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</xmp>
						</div>
						<div class="doc-input">
							在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
						</div>
						<div class="doc-code">
<xmp>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</xmp>
						</div>
						<div class="doc-input">
							当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari(ios7.0版本以后，safari上已看不到效果)
						</div>
						<div class="doc-code">
<xmp>
<meta content="yes" name="apple-mobile-web-app-capable">
</xmp>
						</div>
						<div class="doc-input">
							将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式(可选default、black、black-translucent)
						</div>
						<div class="doc-code">
<xmp>
<meta content="black" name="apple-mobile-web-app-status-bar-style">
</xmp>
						</div>
						<div class="doc-input">
							忽略将页面中的数字识别为电话号码
						</div>
						<div class="doc-code">
<xmp>
<meta content="telephone=no" name="format-detection">
</xmp>
						</div>
						<div class="doc-input">
							忽略Android平台中对邮箱地址的识别
						</div>
						<div class="doc-code">
<xmp>
<meta content="email=no" name="format-detection">
</xmp>
						</div>
						<div class="doc-input">
							预加载常用图片用来提高手机下的访问速度
						</div>
						<div class="doc-code">
<xmp>
<link rel="prefetch" href="预加载的图片" />
</xmp>
						</div>
						<h3 class="doc-h3" id="container">
                        容器
                    </h3>
						<p class="doc-readme">
							在拼图前端框架中，代码效果都包含在.container容器里。
						</p>
						<div class="doc-code">
<xmp>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
	...
</head>

<body>
	<div class="container">
			...
	</div>
</body>

</html>
</xmp>
						</div>
						<blockquote class="quote border-yellow doc-quoteyellow">
							<strong>容器空间</strong> .container容器左右各含10px的内填充(padding)，如果需要宽度100%容器，请使用.layout样式。
						</blockquote>
						<blockquote class="quote border-green doc-quote">
							<strong>容器大小</strong> 在不同屏幕大小，.container，具体表现为超小屏幕：自动；小屏幕：760px；中屏幕：1000px；大屏幕：1200px；当不需要限制容器宽度时，请使用.container-layout容器。
						</blockquote>
						<div class="doc-code">
<xmp>
<div class="layout">
	...
</div>
<div class="container-layout">
	...
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="advise">
                        建议的文档模版
                    </h3>
						<p class="doc-readme">
							在项目中，对于初学者，我们建议采用此文档格式，同时也可以根据自己的需求修改代码。
						</p>
						<div class="doc-code">
<xmp>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<title>拼图前端框架HTML模版</title>
	<meta name="keywords" content="关键词" />
	<meta name="description" content="描述" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="pintuer.css">
	<link rel="stylesheet" href="your.css">
	<script src="jquery.js"></script>
	<script src="pintuer.js"></script>
	<script src="respond.js"></script>
	<script src="your.js"></script>
</head>

<body>
	<div class="container">
		<h1>
			您好，欢迎使用拼图前端框架!
		</h1>
	</div>
</body>

</html>
</xmp>
						</div>
						<blockquote class="quote border-green doc-quote">
							<strong>自定义文件</strong> your.css及your.js为自定义文件，your.css应放在respond.js之前，不然在IE8下无法识别响应式样式。
						</blockquote>
						<br />
						<br />
						<h2 class="doc-h2" id="text">
                        文本
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="title">
                        标题文本
                    </h3>
						<p class="doc-readme">
							HTML的标题文本，从h1到h6，同时也提供了.h1到.h6的样式。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<h1>
                                h1. 拼图前端框架标题：24px
                            </h1>
								<hr />
								<h2>
                                h2. 拼图前端框架标题：20px
                            </h2>
								<hr />
								<h3>
                                h3. 拼图前端框架标题：18px
                            </h3>
								<hr />
								<h4>
                                h4. 拼图前端框架标题：16px
                            </h4>
								<hr />
								<h5>
                                h5. 拼图前端框架标题：14px
                            </h5>
								<hr />
								<h6>
                                h6. 拼图前端框架标题：12px
                            </h6>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<h1>
h1. 拼图前端框架标题
</h1>
<h2>
h2. 拼图前端框架标题
</h2>
<h3>
h3. 拼图前端框架标题
</h3>
<h4>
h4. 拼图前端框架标题
</h4>
<h5>
h5. 拼图前端框架标题
</h5>
<h6>
h6. 拼图前端框架标题
</h6>
</xmp>
						</div>
						<h4 class="doc-title">
                        副标题
                    </h4>
						<div class="doc-input">
							在标题内还可以包含small标签或.small样式，可以用来标记副标题，副文本为主文本字号的60%，当小于12px时显示为12px。
						</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<h1>
                                h1. 拼图前端框架标题 <small>副标题文本</small>
                            </h1>
								<hr />
								<h2>
                                h2. 拼图前端框架标题 <small>副标题文本</small>
                            </h2>
								<hr />
								<h3>
                                h3. 拼图前端框架标题 <small>副标题文本</small>
                            </h3>
								<hr />
								<h4>
                                h4. 拼图前端框架标题 <small>副标题文本</small>
                            </h4>
								<hr />
								<h5>
                                h5. 拼图前端框架标题 <small>副标题文本</small>
                            </h5>
								<hr />
								<h6>
                                h6. 拼图前端框架标题 <small>副标题文本</small>
                            </h6>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<h1>
	h1. 拼图前端框架标题<small>副标题文本</small>
</h1>
<h2>
	h2. 拼图前端框架标题<small>副标题文本</small>
</h2>
<h3>
	h3. 拼图前端框架标题<small>副标题文本</small>
</h3>
<h4>
	h4. 拼图前端框架标题<small>副标题文本</small>
</h4>
<h5>
	h5. 拼图前端框架标题<small>副标题文本</small>
</h5>
<h6>
	h6. 拼图前端框架标题<small>副标题文本</small>
</h6>
</xmp>
						</div>
						<h3 class="doc-h3" id="p">
                        段落文本
                    </h3>
						<p class="doc-readme">
							拼图将全局的字体大小设置为14px，包含div,p,table等，段落文本包含在标签p之内，其他标签同时也可以用.p实现，同时段落文本还设置了15px的底部边距。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<p>
									拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。
								</p>
								<p>
									拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p>
	...
</p>
</xmp>
						</div>
						<h4 class="doc-title">
                        文本缩进
                    </h4>
						<div class="doc-input">
							文本添加.text-indent样式，段落缩进2个字符。
						</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<p class="text-indent">
									拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。
								</p>
								<p class="text-indent">
									拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="text-indent">
	...
</p>
</xmp>
						</div>
						<h3 class="doc-h3" id="strong">
                        强调文本
                    </h3>
						<p class="doc-readme">
							包含加粗、斜体、下划线等效果。
						</p>
						<h4 class="doc-title">
                        强调文本
                    </h4>
						<div class="doc-input">
							也叫着重文本，用strong标签包含，font-weight样式实现，用于强调作用。
						</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								拼图框架<strong>加粗文本</strong>效果
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<strong>加粗文本</strong>
</xmp>
						</div>
						<h4 class="doc-title">
                        斜体文本
                    </h4>
						<div class="doc-input">
							用斜体文本强调，包含在i标签之内。
						</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<i>拼图框架斜体文本</i>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<i>...</i>
</xmp>
						</div>
						<h3 class="doc-h3" id="text-link">
                        链接文本
                    </h3>
						<p class="doc-readme">
							超级链接，包含在a标签内。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<a href="#">链接文本：拼图框架</a>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<a href="#">链接文本：拼图框架</a>
</xmp>
						</div>
						<h3 class="doc-h3" id="text-align">
                        文本对齐
                    </h3>
						<p class="doc-readme">
							包含左对齐，居中，右对齐等效果。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<p class="text-left">
									拼图框架左对齐
								</p>
								<p class="text-center">
									拼图框架居中对齐
								</p>
								<p class="text-right">
									拼图框架右对齐
								</p>
								<p class="text-justify">
									拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="text-left">
	...
</p>
<p class="text-center">
	...
</p>
<p class="text-right">
	...
</p>
<p class="text-justify">
	...
</p>
</xmp>
						</div>
						<h3 class="doc-h3" id="text-size">
                        文本字号
                    </h3>
						<p class="doc-readme">
							文本字号由font-size设置，拼图框架把字号分为特大号、大号、普通、小号、特小号五个等级。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="text-large">
									特大号文本：拼图框架 <small>24px</small>
								</div>
								<hr />
								<div class="text-big">
									大号文本：拼图框架 <small>16px</small>
								</div>
								<hr />
								<div class="text-default">
									普通文本：拼图框架 <small>14px</small>
								</div>
								<hr />
								<div class="text-small">
									小号文本：拼图框架 <small>12px</small>
								</div>
								<hr />
								<div class="text-little">
									特小号文本：拼图框架 <small>10px</small>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="text-large">
	...
</div>
<div class="text-big">
	...
</div>
<div class="text-default">
	...
</div>
<div class="text-small">
	...
</div>
<div class="text-little">
	...
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        small小号文本
                    </h4>
						<div class="doc-input">
							使用small标签或.text-small样式，可以设置成小号文本，大小为主文本的80%。
						</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								小号文本：<small>拼图框架</small>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<small>...</small>
</xmp>
						</div>
						<h3 class="doc-h3" id="text-color">
                        文本颜色
                    </h3>
						<p class="doc-readme">
							可通过样式改变文本颜色，也可以应用于文本链接，网页配色色系，除默认的颜色外，建议根据实际应用来修改，上一章节已介绍自定义颜色修改方法。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<p>
									文本颜色：默认
								</p>
								<p class="text-main">
									文本颜色：主色
								</p>
								<p class="text-sub">
									文本颜色：辅色
								</p>
								<p class="text-back">
									文本颜色：背景色
								</p>
								<p class="text-mix">
									文本颜色：融合色
								</p>
								<p class="text-dot">
									文本颜色：点缀色
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p>
	文本颜色：默认
</p>
<p class="text-main">
	文本颜色：主色
</p>
<p class="text-sub">
	文本颜色：辅色
</p>
<p class="text-back">
	文本颜色：背景色
</p>
<p class="text-mix">
	文本颜色：融合色
</p>
<p class="text-dot">
	文本颜色：点缀色
</p>
</xmp>
						</div>
						<h4 class="doc-title">
                        黑灰白
                    </h4>
						<div class="doc-input">
							无色色系，包含黑白灰三色，不建议改动，使用默认即可。
						</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<p class="text-black">
									文本颜色：黑色
								</p>
								<p class="text-gray">
									文本颜色：灰色
								</p>
								<div class="radius bg-main padding">
									<p class="text-white" style="margin: 0;">
										文本颜色：白色
									</p>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="text-black">
	文本颜色：黑色
</p>
<p class="text-gray">
	文本颜色：灰色
</p>
<p class="text-white">
	文本颜色：白色
</p>
</xmp>
						</div>
						<h4 class="doc-title">
                        提示颜色
                    </h4>
						<div class="doc-input">
							包含红色、黄色、蓝色、绿色四种提示文字。
						</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<p class="text-red">
									提示颜色：红色
								</p>
								<p class="text-yellow">
									提示颜色：黄色
								</p>
								<p class="text-blue">
									提示颜色：蓝色
								</p>
								<p class="text-green">
									提示颜色：绿色
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="text-red">
	提示颜色：红色
</p>
<p class="text-yellow">
	提示颜色：黄色
</p>
<p class="text-blue">
	提示颜色：蓝色
</p>
<p class="text-green">
	提示颜色：绿色
</p>
</xmp>
						</div>
						<h4 class="doc-title">
                        柔和提示色
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<p class="text-red-light">
									提示颜色：淡红
								</p>
								<p class="text-yellow-light">
									提示颜色：淡黄
								</p>
								<p class="text-blue-light">
									提示颜色：淡蓝
								</p>
								<p class="text-green-light">
									提示颜色：淡绿
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="text-red-light">
	提示颜色：淡红
</p>
<p class="text-yellow-light">
	提示颜色：淡黄
</p>
<p class="text-blue-light">
	提示颜色：淡蓝
</p>
<p class="text-green-light">
	提示颜色：淡绿
</p>
</xmp>
						</div>
						<h3 class="doc-h3" id="text-height">
                        文本行距
                    </h3>
						<p class="doc-readme">
							文本行距分为超小行距16px(.height-little)、小行距20px(.height-small)、默认24px(.height)、大行距30px(.height-big)、超大行距40px(.height-large)。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<strong>超小行距16px(.height-little)：</strong>
								<p class="height-little">
									拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
								</p>
								<strong>小行距20px(.height-small)：</strong>
								<p class="height-small">
									拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。
								</p>
								<strong>默认24px(.height)：</strong>
								<p class="height">
									移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面浏览器的同时，更适应了移动互联网的潮流。
								</p>
								<strong>大行距30px(.height-big)：</strong>
								<p class="height-big">
									组件丰富、海量插件：拼图前端框架重新定义了CSS基础、常用元件及JS组件，可快速构架前端界面，实现跨屏响应。同时兼容所有jQuery插件，在项目中可以灵活使用，让前端开发如虎添翼。
								</p>
								<strong>超大行距40px(.height-large)：</strong>
								<p class="height-large">
									轻量高效、国产开源：拼图基于应用广泛jQuery插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="height-little">
	...
</p>
<p class="height-small">
	...
</p>
<p class="height">
	...
</p>
<p class="height-big">
	...
</p>
<p class="height-large">
	...
</p>
</xmp>
						</div>
						<br />
						<br />
						<h3 class="doc-h3" id="text-break">
                        文本换行<span class="tag bg-yellow">新增</span>
                    </h3>
						<p class="doc-readme">
						设置文字换行，.text-break 默认自动换行/.text-breakall 字母在单词内换行/.text-unbreak 强制不换行.
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<strong>宽度80%自动换行</strong>
								<p class="text-break" style="width: 80%;border: 1px solid #009F95;">
									拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
								</p>
								<strong>英文字母内换行</strong>
								<p class="text-breakall" style="width: 80%;border: 1px solid #009F95;">
									Jigsaw puzzle is excellent responsive front-end CSS open source framework, domestic front frame pioneer and leader, automatically adapt to the mobile phone, tablet, computer equipment, such as let the front-end development happy game, simple, flexible and convenient.
								</p>
								<strong>强制不换行(注：<span class="text-red">浏览器中看到的并不是拼图BUG，可以做强制不换行演示，可能会影响到美观，望体谅。</span></strong>
								<p class="text-unbreak" style="width: 80%;border: 1px solid #009F95;">
									移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应。
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="text-break">
	...
</p>
<p class="text-breakall">
	...
</p>
<p class="text-unbreak">
	...
</p>
</xmp>
						</div>
						<br />
						<br />
						<h3 class="doc-h3" id="text-more">
                        文本截断<span class="tag bg-yellow">新增</span>
                    </h3>
						<p class="doc-readme">
							指定宽度后截断文本并用省略。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<strong>截断文字(只能截断一行文字并出现省略号，此样式多用于文章标题)</strong>
								<p class="text-more">
									拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
								</p>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="text-more">
	...
</p>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="color">
                        	颜色 <span class="tag bg-yellow">新增</span>
                    	</h2>
						<p class="doc-lead">
						</p>
						<h4 class="doc-title" id="color-default">默认颜色</h4>
						<div class="doc-input">
							拼图响应式前端CSS框架自带颜色。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
										<table id="table-color" border="0" cellspacing="0" cellpadding="0" class="table">
											<tbody>
												<tr>
													<td height="60" align="center" colspan="5">
														<h2>拼图默认颜色表</h2>
													</td>
												</tr>
												<tr align="center">
													<td>
														<strong>颜&nbsp; &nbsp;色</strong>
													</td>
													<td>
														<strong>类&nbsp; &nbsp;名</strong>
													</td>
													<td>
														<strong>描&nbsp; &nbsp;述</strong>
													</td>
													<td>
														<strong>色值</strong>
													</td>
													<td>
														<strong>类&nbsp; &nbsp;型</strong>
													</td>
												</tr>
												<tr>
													<td bgcolor="#000" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														-
													</td>
													<td style="text-align:center;">
														默认/黑色
													</td>
													<td style="text-align:center;">
														#000
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#0a8" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-main/bg-main/border-main
													</td>
													<td style="text-align:center;">
														主色
													</td>
													<td style="text-align:center;">
														#0a8
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#0ae" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-sub/bg-sub/border-sub
													</td>
													<td style="text-align:center;">
														辅色
													</td>
													<td style="text-align:center;">
														#0ae
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#efe" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-back/bg-back/border-back
													</td>
													<td style="text-align:center;">
														背景色
													</td>
													<td style="text-align:center;">
														#efe
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#aed" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-mix/bg-mix/border-mix
													</td>
													<td style="text-align:center;">
														融合色
													</td>
													<td style="text-align:center;">
														#aed
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#e33" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-dot/bg-dot/border-dot
													</td>
													<td style="text-align:center;">
														点缀色
													</td>
													<td style="text-align:center;">
														#e33
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#000" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-black/bg-black/border-black
													</td>
													<td style="text-align:center;">
														黑色
													</td>
													<td style="text-align:center;">
														#000
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#999" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-gray/bg-gray/border-gray
													</td>
													<td style="text-align:center;">
														灰色
													</td>
													<td style="text-align:center;">
														#999
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#fff" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-white/bg-white/border-white
													</td>
													<td style="text-align:center;">
														白色
													</td>
													<td style="text-align:center;">
														#fff
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#e33" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-red/bg-red/border-red
													</td>
													<td style="text-align:center;">
														红色
													</td>
													<td style="text-align:center;">
														#e33
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#f60" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-yellow/bg-yellow/border-yellow
													</td>
													<td style="text-align:center;">
														黄色
													</td>
													<td style="text-align:center;">
														#f60
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#0ae" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-blue/bg-blue/border-blue
													</td>
													<td style="text-align:center;">
														蓝色
													</td>
													<td style="text-align:center;">
														#0ae
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#2c7" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-green/bg-green/border-green
													</td>
													<td style="text-align:center;">
														绿色
													</td>
													<td style="text-align:center;">
														#2c7
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#fcd" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-red-light/bg-red-light/border-red-light
													</td>
													<td style="text-align:center;">
														淡红
													</td>
													<td style="text-align:center;">
														#fcd
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#fec" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-yellow-light/bg-yellow-light/border-yellow-light
													</td>
													<td style="text-align:center;">
														淡黄
													</td>
													<td style="text-align:center;">
														#fec
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#def" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-blue-light/bg-blue-light/border-blue-light
													</td>
													<td style="text-align:center;">
														淡蓝
													</td>
													<td style="text-align:center;">
														#def
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
												<tr>
													<td bgcolor="#ded" style="text-align:center;">
													</td>
													<td style="text-align:center;">
														text-green-light/bg-green-light/border-green-light
													</td>
													<td style="text-align:center;">
														淡绿
													</td>
													<td style="text-align:center;">
														#ded
													</td>
													<td style="text-align:center;">
														文本色/背景色/边框色
													</td>
												</tr>
											</tbody>
										</table>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
...
</xmp>
						</div>
						<h4 class="doc-title" id="color-table">自定义颜色</h4>
						<div class="doc-input">
							用户自行设定颜色，这里只提供颜色值表和自定义颜色命名规范。当然也可以使用：<a class="tag bg-yellow" href="/tools/color.html" target="_blank">拼图自定义颜色生成工具</a>快速生成样式。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
							<table border="0" cellspacing="0" cellpadding="0" class="table">
								<tbody>
									<tr>
										<td height="60" align="center" colspan="5">
											<h2>
												十六进制颜色表
											</h2>
										</td>
									</tr>
									<tr align="center">
										<td>
											<strong>颜&nbsp; &nbsp;色</strong>
										</td>
										<td>
											<strong>英文代码</strong>
										</td>
										<td>
											<strong>形象描述</strong>
										</td>
										<td>
											<strong>十六进制</strong>
										</td>
										<td>
											<strong>RGB</strong>
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffb6c1" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightPink
										</td>
										<td style="text-align:center;">
											浅粉红
										</td>
										<td style="text-align:center;">
											#FFB6C1
										</td>
										<td style="text-align:center;">
											255,182,193
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffc0cb" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Pink
										</td>
										<td style="text-align:center;">
											粉红
										</td>
										<td style="text-align:center;">
											#FFC0CB
										</td>
										<td style="text-align:center;">
											255,192,203
										</td>
									</tr>
									<tr>
										<td bgcolor="#dc143c" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Crimson
										</td>
										<td style="text-align:center;">
											猩红
										</td>
										<td style="text-align:center;">
											#DC143C
										</td>
										<td style="text-align:center;">
											220,20,60
										</td>
									</tr>
									<tr>
										<td bgcolor="#fff0f5" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LavenderBlush
										</td>
										<td style="text-align:center;">
											脸红的淡紫色
										</td>
										<td style="text-align:center;">
											#FFF0F5
										</td>
										<td style="text-align:center;">
											255,240,245
										</td>
									</tr>
									<tr>
										<td bgcolor="#db7093" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											PaleVioletRed
										</td>
										<td style="text-align:center;">
											苍白的紫罗兰红色
										</td>
										<td style="text-align:center;">
											#DB7093
										</td>
										<td style="text-align:center;">
											219,112,147
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff69b4" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											HotPink
										</td>
										<td style="text-align:center;">
											热情的粉红
										</td>
										<td style="text-align:center;">
											#FF69B4
										</td>
										<td style="text-align:center;">
											255,105,180
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff1493" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DeepPink
										</td>
										<td style="text-align:center;">
											深粉色
										</td>
										<td style="text-align:center;">
											#FF1493
										</td>
										<td style="text-align:center;">
											255,20,147
										</td>
									</tr>
									<tr>
										<td bgcolor="#c71585" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MediumVioletRed
										</td>
										<td style="text-align:center;">
											适中的紫罗兰红色
										</td>
										<td style="text-align:center;">
											#C71585
										</td>
										<td style="text-align:center;">
											199,21,133
										</td>
									</tr>
									<tr>
										<td bgcolor="#da70d6" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Orchid
										</td>
										<td style="text-align:center;">
											兰花的紫色
										</td>
										<td style="text-align:center;">
											#DA70D6
										</td>
										<td style="text-align:center;">
											218,112,214
										</td>
									</tr>
									<tr>
										<td bgcolor="#d8bfd8" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Thistle
										</td>
										<td style="text-align:center;">
											蓟
										</td>
										<td style="text-align:center;">
											#D8BFD8
										</td>
										<td style="text-align:center;">
											216,191,216
										</td>
									</tr>
									<tr>
										<td bgcolor="#dda0dd" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											plum
										</td>
										<td style="text-align:center;">
											李子
										</td>
										<td style="text-align:center;">
											#DDA0DD
										</td>
										<td style="text-align:center;">
											221,160,221
										</td>
									</tr>
									<tr>
										<td bgcolor="#ee82ee" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Violet
										</td>
										<td style="text-align:center;">
											紫罗兰
										</td>
										<td style="text-align:center;">
											#EE82EE
										</td>
										<td style="text-align:center;">
											238,130,238
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff00ff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Magenta
										</td>
										<td style="text-align:center;">
											洋红
										</td>
										<td style="text-align:center;">
											#FF00FF
										</td>
										<td style="text-align:center;">
											255,0,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff00ff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Fuchsia
										</td>
										<td style="text-align:center;">
											灯笼海棠(紫红色)
										</td>
										<td style="text-align:center;">
											#FF00FF
										</td>
										<td style="text-align:center;">
											255,0,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#8b008b" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkMagenta
										</td>
										<td style="text-align:center;">
											深洋红色
										</td>
										<td style="text-align:center;">
											#8B008B
										</td>
										<td style="text-align:center;">
											139,0,139
										</td>
									</tr>
									<tr>
										<td bgcolor="#800080" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Purple
										</td>
										<td style="text-align:center;">
											紫色
										</td>
										<td style="text-align:center;">
											#800080
										</td>
										<td style="text-align:center;">
											128,0,128
										</td>
									</tr>
									<tr>
										<td bgcolor="#ba55d3" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MediumOrchid
										</td>
										<td style="text-align:center;">
											适中的兰花紫
										</td>
										<td style="text-align:center;">
											#BA55D3
										</td>
										<td style="text-align:center;">
											186,85,211
										</td>
									</tr>
									<tr>
										<td bgcolor="#da00e0" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkVoilet
										</td>
										<td style="text-align:center;">
											深紫罗兰色
										</td>
										<td style="text-align:center;">
											#9400D3
										</td>
										<td style="text-align:center;">
											148,0,211
										</td>
									</tr>
									<tr>
										<td bgcolor="#9932cc" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkOrchid
										</td>
										<td style="text-align:center;">
											深兰花紫
										</td>
										<td style="text-align:center;">
											#9932CC
										</td>
										<td style="text-align:center;">
											153,50,204
										</td>
									</tr>
									<tr>
										<td bgcolor="#4b0082" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Indigo
										</td>
										<td style="text-align:center;">
											靛青
										</td>
										<td style="text-align:center;">
											#4B0082
										</td>
										<td style="text-align:center;">
											75,0,130
										</td>
									</tr>
									<tr>
										<td bgcolor="#8a2be2" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											BlueViolet
										</td>
										<td style="text-align:center;">
											深紫罗兰的蓝色
										</td>
										<td style="text-align:center;">
											#8A2BE2
										</td>
										<td style="text-align:center;">
											138,43,226
										</td>
									</tr>
									<tr>
										<td bgcolor="#9370db" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MediumPurple
										</td>
										<td style="text-align:center;">
											适中的紫色
										</td>
										<td style="text-align:center;">
											#9370DB
										</td>
										<td style="text-align:center;">
											147,112,219
										</td>
									</tr>
									<tr>
										<td bgcolor="#7b68ee" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MediumSlateBlue
										</td>
										<td style="text-align:center;">
											适中的板岩暗蓝灰色
										</td>
										<td style="text-align:center;">
											#7B68EE
										</td>
										<td style="text-align:center;">
											123,104,238
										</td>
									</tr>
									<tr>
										<td bgcolor="#6a5acd" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SlateBlue
										</td>
										<td style="text-align:center;">
											板岩暗蓝灰色
										</td>
										<td style="text-align:center;">
											#6A5ACD
										</td>
										<td style="text-align:center;">
											106,90,205
										</td>
									</tr>
									<tr>
										<td bgcolor="#483d8b" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkSlateBlue
										</td>
										<td style="text-align:center;">
											深岩暗蓝灰色
										</td>
										<td style="text-align:center;">
											#483D8B
										</td>
										<td style="text-align:center;">
											72,61,139
										</td>
									</tr>
									<tr>
										<td bgcolor="#e6e6fa" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Lavender
										</td>
										<td style="text-align:center;">
											熏衣草花的淡紫色
										</td>
										<td style="text-align:center;">
											#E6E6FA
										</td>
										<td style="text-align:center;">
											230,230,250
										</td>
									</tr>
									<tr>
										<td bgcolor="#f8f8ff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											GhostWhite
										</td>
										<td style="text-align:center;">
											幽灵的白色
										</td>
										<td style="text-align:center;">
											#F8F8FF
										</td>
										<td style="text-align:center;">
											248,248,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#0000ff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Blue
										</td>
										<td style="text-align:center;">
											纯蓝
										</td>
										<td style="text-align:center;">
											#0000FF
										</td>
										<td style="text-align:center;">
											0,0,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#0000cd" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MediumBlue
										</td>
										<td style="text-align:center;">
											适中的蓝色
										</td>
										<td style="text-align:center;">
											#0000CD
										</td>
										<td style="text-align:center;">
											0,0,205
										</td>
									</tr>
									<tr>
										<td bgcolor="#191970" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MidnightBlue
										</td>
										<td style="text-align:center;">
											午夜的蓝色
										</td>
										<td style="text-align:center;">
											#191970
										</td>
										<td style="text-align:center;">
											25,25,112
										</td>
									</tr>
									<tr>
										<td bgcolor="#00008b" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkBlue
										</td>
										<td style="text-align:center;">
											深蓝色
										</td>
										<td style="text-align:center;">
											#00008B
										</td>
										<td style="text-align:center;">
											0,0,139
										</td>
									</tr>
									<tr>
										<td bgcolor="#000080" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Navy
										</td>
										<td style="text-align:center;">
											海军蓝
										</td>
										<td style="text-align:center;">
											#000080
										</td>
										<td style="text-align:center;">
											0,0,128
										</td>
									</tr>
									<tr>
										<td bgcolor="#4169e1" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											RoyalBlue
										</td>
										<td style="text-align:center;">
											皇军蓝
										</td>
										<td style="text-align:center;">
											#4169E1
										</td>
										<td style="text-align:center;">
											65,105,225
										</td>
									</tr>
									<tr>
										<td bgcolor="#6495ed" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											CornflowerBlue
										</td>
										<td style="text-align:center;">
											矢车菊的蓝色
										</td>
										<td style="text-align:center;">
											#6495ED
										</td>
										<td style="text-align:center;">
											100,149,237
										</td>
									</tr>
									<tr>
										<td bgcolor="#b0c4de" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightSteelBlue
										</td>
										<td style="text-align:center;">
											淡钢蓝
										</td>
										<td style="text-align:center;">
											#B0C4DE
										</td>
										<td style="text-align:center;">
											176,196,222
										</td>
									</tr>
									<tr>
										<td bgcolor="#778899" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightSlateGray
										</td>
										<td style="text-align:center;">
											浅石板灰
										</td>
										<td style="text-align:center;">
											#778899
										</td>
										<td style="text-align:center;">
											119,136,153
										</td>
									</tr>
									<tr>
										<td bgcolor="#708090" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SlateGray
										</td>
										<td style="text-align:center;">
											石板灰
										</td>
										<td style="text-align:center;">
											#708090
										</td>
										<td style="text-align:center;">
											112,128,144
										</td>
									</tr>
									<tr>
										<td bgcolor="#d0e000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DoderBlue
										</td>
										<td style="text-align:center;">
											道奇蓝
										</td>
										<td style="text-align:center;">
											#1E90FF
										</td>
										<td style="text-align:center;">
											30,144,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#f0f8ff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											AliceBlue
										</td>
										<td style="text-align:center;">
											爱丽丝蓝
										</td>
										<td style="text-align:center;">
											#F0F8FF
										</td>
										<td style="text-align:center;">
											240,248,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#4682b4" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SteelBlue
										</td>
										<td style="text-align:center;">
											钢蓝
										</td>
										<td style="text-align:center;">
											#4682B4
										</td>
										<td style="text-align:center;">
											70,130,180
										</td>
									</tr>
									<tr>
										<td bgcolor="#87cefa" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightSkyBlue
										</td>
										<td style="text-align:center;">
											淡蓝色
										</td>
										<td style="text-align:center;">
											#87CEFA
										</td>
										<td style="text-align:center;">
											135,206,250
										</td>
									</tr>
									<tr>
										<td bgcolor="#87ceeb" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SkyBlue
										</td>
										<td style="text-align:center;">
											天蓝色
										</td>
										<td style="text-align:center;">
											#87CEEB
										</td>
										<td style="text-align:center;">
											135,206,235
										</td>
									</tr>
									<tr>
										<td bgcolor="#00bfff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DeepSkyBlue
										</td>
										<td style="text-align:center;">
											深天蓝
										</td>
										<td style="text-align:center;">
											#00BFFF
										</td>
										<td style="text-align:center;">
											0,191,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#add8e6" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightBLue
										</td>
										<td style="text-align:center;">
											淡蓝
										</td>
										<td style="text-align:center;">
											#ADD8E6
										</td>
										<td style="text-align:center;">
											173,216,230
										</td>
									</tr>
									<tr>
										<td bgcolor="#b0e0e6" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											PowDerBlue
										</td>
										<td style="text-align:center;">
											火药蓝
										</td>
										<td style="text-align:center;">
											#B0E0E6
										</td>
										<td style="text-align:center;">
											176,224,230
										</td>
									</tr>
									<tr>
										<td bgcolor="#5f9ea0" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											CadetBlue
										</td>
										<td style="text-align:center;">
											军校蓝
										</td>
										<td style="text-align:center;">
											#5F9EA0
										</td>
										<td style="text-align:center;">
											95,158,160
										</td>
									</tr>
									<tr>
										<td bgcolor="#f0ffff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Azure
										</td>
										<td style="text-align:center;">
											蔚蓝色
										</td>
										<td style="text-align:center;">
											#F0FFFF
										</td>
										<td style="text-align:center;">
											240,255,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#e0ffff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightCyan
										</td>
										<td style="text-align:center;">
											淡青色
										</td>
										<td style="text-align:center;">
											#E1FFFF
										</td>
										<td style="text-align:center;">
											225,255,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#afeeee" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											PaleTurquoise
										</td>
										<td style="text-align:center;">
											苍白的绿宝石
										</td>
										<td style="text-align:center;">
											#AFEEEE
										</td>
										<td style="text-align:center;">
											175,238,238
										</td>
									</tr>
									<tr>
										<td bgcolor="#00ffff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Cyan
										</td>
										<td style="text-align:center;">
											青色
										</td>
										<td style="text-align:center;">
											#00FFFF
										</td>
										<td style="text-align:center;">
											0,255,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#00ffff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Aqua
										</td>
										<td style="text-align:center;">
											水绿色
										</td>
										<td style="text-align:center;">
											#00FFFF
										</td>
										<td style="text-align:center;">
											0,255,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#00ced1" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkTurquoise
										</td>
										<td style="text-align:center;">
											深绿宝石
										</td>
										<td style="text-align:center;">
											#00CED1
										</td>
										<td style="text-align:center;">
											0,206,209
										</td>
									</tr>
									<tr>
										<td bgcolor="#2f4f4f" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkSlateGray
										</td>
										<td style="text-align:center;">
											深石板灰
										</td>
										<td style="text-align:center;">
											#2F4F4F
										</td>
										<td style="text-align:center;">
											47,79,79
										</td>
									</tr>
									<tr>
										<td bgcolor="#008b8b" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkCyan
										</td>
										<td style="text-align:center;">
											深青色
										</td>
										<td style="text-align:center;">
											#008B8B
										</td>
										<td style="text-align:center;">
											0,139,139
										</td>
									</tr>
									<tr>
										<td bgcolor="#008080" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Teal
										</td>
										<td style="text-align:center;">
											水鸭色
										</td>
										<td style="text-align:center;">
											#008080
										</td>
										<td style="text-align:center;">
											0,128,128
										</td>
									</tr>
									<tr>
										<td bgcolor="#48d1cc" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MediumTurquoise
										</td>
										<td style="text-align:center;">
											适中的绿宝石
										</td>
										<td style="text-align:center;">
											#48D1CC
										</td>
										<td style="text-align:center;">
											72,209,204
										</td>
									</tr>
									<tr>
										<td bgcolor="#20b2aa" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightSeaGreen
										</td>
										<td style="text-align:center;">
											浅海洋绿
										</td>
										<td style="text-align:center;">
											#20B2AA
										</td>
										<td style="text-align:center;">
											32,178,170
										</td>
									</tr>
									<tr>
										<td bgcolor="#40e0d0" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Turquoise
										</td>
										<td style="text-align:center;">
											绿宝石
										</td>
										<td style="text-align:center;">
											#40E0D0
										</td>
										<td style="text-align:center;">
											64,224,208
										</td>
									</tr>
									<tr>
										<td bgcolor="#a0a000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Auqamarin
										</td>
										<td style="text-align:center;">
											绿玉\碧绿色
										</td>
										<td style="text-align:center;">
											#7FFFAA
										</td>
										<td style="text-align:center;">
											127,255,170
										</td>
									</tr>
									<tr>
										<td bgcolor="#66cdaa" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MediumAquamarine
										</td>
										<td style="text-align:center;">
											适中的碧绿色
										</td>
										<td style="text-align:center;">
											#00FA9A
										</td>
										<td style="text-align:center;">
											0,250,154
										</td>
									</tr>
									<tr>
										<td bgcolor="#00fa9a" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MediumSpringGreen
										</td>
										<td style="text-align:center;">
											适中的春天的绿色
										</td>
										<td style="text-align:center;">
											#F5FFFA
										</td>
										<td style="text-align:center;">
											245,255,250
										</td>
									</tr>
									<tr>
										<td bgcolor="#f5fffa" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MintCream
										</td>
										<td style="text-align:center;">
											薄荷奶油
										</td>
										<td style="text-align:center;">
											#00FF7F
										</td>
										<td style="text-align:center;">
											0,255,127
										</td>
									</tr>
									<tr>
										<td bgcolor="#00ff7f" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SpringGreen
										</td>
										<td style="text-align:center;">
											春天的绿色
										</td>
										<td style="text-align:center;">
											#3CB371
										</td>
										<td style="text-align:center;">
											60,179,113
										</td>
									</tr>
									<tr>
										<td bgcolor="#2e8b57" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SeaGreen
										</td>
										<td style="text-align:center;">
											海洋绿
										</td>
										<td style="text-align:center;">
											#2E8B57
										</td>
										<td style="text-align:center;">
											46,139,87
										</td>
									</tr>
									<tr>
										<td bgcolor="#f0fff0" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Honeydew
										</td>
										<td style="text-align:center;">
											蜂蜜
										</td>
										<td style="text-align:center;">
											#F0FFF0
										</td>
										<td style="text-align:center;">
											240,255,240
										</td>
									</tr>
									<tr>
										<td bgcolor="#90ee90" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightGreen
										</td>
										<td style="text-align:center;">
											淡绿色
										</td>
										<td style="text-align:center;">
											#90EE90
										</td>
										<td style="text-align:center;">
											144,238,144
										</td>
									</tr>
									<tr>
										<td bgcolor="#98fb98" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											PaleGreen
										</td>
										<td style="text-align:center;">
											苍白的绿色
										</td>
										<td style="text-align:center;">
											#98FB98
										</td>
										<td style="text-align:center;">
											152,251,152
										</td>
									</tr>
									<tr>
										<td bgcolor="#8fbc8f" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkSeaGreen
										</td>
										<td style="text-align:center;">
											深海洋绿
										</td>
										<td style="text-align:center;">
											#8FBC8F
										</td>
										<td style="text-align:center;">
											143,188,143
										</td>
									</tr>
									<tr>
										<td bgcolor="#32cd32" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LimeGreen
										</td>
										<td style="text-align:center;">
											酸橙绿
										</td>
										<td style="text-align:center;">
											#32CD32
										</td>
										<td style="text-align:center;">
											50,205,50
										</td>
									</tr>
									<tr>
										<td bgcolor="#00ff00" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Lime
										</td>
										<td style="text-align:center;">
											酸橙色
										</td>
										<td style="text-align:center;">
											#00FF00
										</td>
										<td style="text-align:center;">
											0,255,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#228b22" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											ForestGreen
										</td>
										<td style="text-align:center;">
											森林绿
										</td>
										<td style="text-align:center;">
											#228B22
										</td>
										<td style="text-align:center;">
											34,139,34
										</td>
									</tr>
									<tr>
										<td bgcolor="#008000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Green
										</td>
										<td style="text-align:center;">
											纯绿
										</td>
										<td style="text-align:center;">
											#008000
										</td>
										<td style="text-align:center;">
											0,128,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#006400" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkGreen
										</td>
										<td style="text-align:center;">
											深绿色
										</td>
										<td style="text-align:center;">
											#006400
										</td>
										<td style="text-align:center;">
											0,100,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#7fff00" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Chartreuse
										</td>
										<td style="text-align:center;">
											查特酒绿
										</td>
										<td style="text-align:center;">
											#7FFF00
										</td>
										<td style="text-align:center;">
											127,255,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#7cfc00" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LawnGreen
										</td>
										<td style="text-align:center;">
											草坪绿
										</td>
										<td style="text-align:center;">
											#7CFC00
										</td>
										<td style="text-align:center;">
											124,252,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#adff2f" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											GreenYellow
										</td>
										<td style="text-align:center;">
											绿黄色
										</td>
										<td style="text-align:center;">
											#ADFF2F
										</td>
										<td style="text-align:center;">
											173,255,47
										</td>
									</tr>
									<tr>
										<td bgcolor="#6b8e23" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											OliveDrab
										</td>
										<td style="text-align:center;">
											橄榄土褐色
										</td>
										<td style="text-align:center;">
											#556B2F
										</td>
										<td style="text-align:center;">
											85,107,47
										</td>
									</tr>
									<tr>
										<td bgcolor="#f5f5dc" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Beige
										</td>
										<td style="text-align:center;">
											米色(浅褐色)
										</td>
										<td style="text-align:center;">
											#6B8E23
										</td>
										<td style="text-align:center;">
											107,142,35
										</td>
									</tr>
									<tr>
										<td bgcolor="#fafad2" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightGoldenrodYellow
										</td>
										<td style="text-align:center;">
											浅秋麒麟黄
										</td>
										<td style="text-align:center;">
											#FAFAD2
										</td>
										<td style="text-align:center;">
											250,250,210
										</td>
									</tr>
									<tr>
										<td bgcolor="#fffff0" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Ivory
										</td>
										<td style="text-align:center;">
											象牙
										</td>
										<td style="text-align:center;">
											#FFFFF0
										</td>
										<td style="text-align:center;">
											255,255,240
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffffe0" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightYellow
										</td>
										<td style="text-align:center;">
											浅黄色
										</td>
										<td style="text-align:center;">
											#FFFFE0
										</td>
										<td style="text-align:center;">
											255,255,224
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffff00" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Yellow
										</td>
										<td style="text-align:center;">
											纯黄
										</td>
										<td style="text-align:center;">
											#FFFF00
										</td>
										<td style="text-align:center;">
											255,255,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#808000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Olive
										</td>
										<td style="text-align:center;">
											橄榄
										</td>
										<td style="text-align:center;">
											#808000
										</td>
										<td style="text-align:center;">
											128,128,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#bdb76b" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkKhaki
										</td>
										<td style="text-align:center;">
											深卡其布
										</td>
										<td style="text-align:center;">
											#BDB76B
										</td>
										<td style="text-align:center;">
											189,183,107
										</td>
									</tr>
									<tr>
										<td bgcolor="#fffacd" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LemonChiffon
										</td>
										<td style="text-align:center;">
											柠檬薄纱
										</td>
										<td style="text-align:center;">
											#FFFACD
										</td>
										<td style="text-align:center;">
											255,250,205
										</td>
									</tr>
									<tr>
										<td bgcolor="#a00d00" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											PaleGodenrod
										</td>
										<td style="text-align:center;">
											灰秋麒麟
										</td>
										<td style="text-align:center;">
											#EEE8AA
										</td>
										<td style="text-align:center;">
											238,232,170
										</td>
									</tr>
									<tr>
										<td bgcolor="#f0e68c" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Khaki
										</td>
										<td style="text-align:center;">
											卡其布
										</td>
										<td style="text-align:center;">
											#F0E68C
										</td>
										<td style="text-align:center;">
											240,230,140
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffd700" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Gold
										</td>
										<td style="text-align:center;">
											金
										</td>
										<td style="text-align:center;">
											#FFD700
										</td>
										<td style="text-align:center;">
											255,215,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#c00000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Cornislk
										</td>
										<td style="text-align:center;">
											玉米色
										</td>
										<td style="text-align:center;">
											#FFF8DC
										</td>
										<td style="text-align:center;">
											255,248,220
										</td>
									</tr>
									<tr>
										<td bgcolor="#daa520" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											GoldEnrod
										</td>
										<td style="text-align:center;">
											秋麒麟
										</td>
										<td style="text-align:center;">
											#DAA520
										</td>
										<td style="text-align:center;">
											218,165,32
										</td>
									</tr>
									<tr>
										<td bgcolor="#fffaf0" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											FloralWhite
										</td>
										<td style="text-align:center;">
											花的白色
										</td>
										<td style="text-align:center;">
											#FFFAF0
										</td>
										<td style="text-align:center;">
											255,250,240
										</td>
									</tr>
									<tr>
										<td bgcolor="#fdf5e6" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											OldLace
										</td>
										<td style="text-align:center;">
											老饰带
										</td>
										<td style="text-align:center;">
											#FDF5E6
										</td>
										<td style="text-align:center;">
											253,245,230
										</td>
									</tr>
									<tr>
										<td bgcolor="#f5deb3" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Wheat
										</td>
										<td style="text-align:center;">
											小麦色
										</td>
										<td style="text-align:center;">
											#F5DEB3
										</td>
										<td style="text-align:center;">
											245,222,179
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffe4b5" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Moccasin
										</td>
										<td style="text-align:center;">
											鹿皮鞋
										</td>
										<td style="text-align:center;">
											#FFE4B5
										</td>
										<td style="text-align:center;">
											255,228,181
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffa500" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Orange
										</td>
										<td style="text-align:center;">
											橙色
										</td>
										<td style="text-align:center;">
											#FFA500
										</td>
										<td style="text-align:center;">
											255,165,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffefd5" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											PapayaWhip
										</td>
										<td style="text-align:center;">
											番木瓜
										</td>
										<td style="text-align:center;">
											#FFEFD5
										</td>
										<td style="text-align:center;">
											255,239,213
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffebcd" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											BlanchedAlmond
										</td>
										<td style="text-align:center;">
											漂白的杏仁
										</td>
										<td style="text-align:center;">
											#FFEBCD
										</td>
										<td style="text-align:center;">
											255,235,205
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffdead" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											NavajoWhite
										</td>
										<td style="text-align:center;">
											Navajo白
										</td>
										<td style="text-align:center;">
											#FFDEAD
										</td>
										<td style="text-align:center;">
											255,222,173
										</td>
									</tr>
									<tr>
										<td bgcolor="#faebd7" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											AntiqueWhite
										</td>
										<td style="text-align:center;">
											古代的白色
										</td>
										<td style="text-align:center;">
											#FAEBD7
										</td>
										<td style="text-align:center;">
											250,235,215
										</td>
									</tr>
									<tr>
										<td bgcolor="#d2b48c" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Tan
										</td>
										<td style="text-align:center;">
											晒黑
										</td>
										<td style="text-align:center;">
											#D2B48C
										</td>
										<td style="text-align:center;">
											210,180,140
										</td>
									</tr>
									<tr>
										<td bgcolor="#b00000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											BrulyWood
										</td>
										<td style="text-align:center;">
											结实的树
										</td>
										<td style="text-align:center;">
											#DEB887
										</td>
										<td style="text-align:center;">
											222,184,135
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffe4c4" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Bisque
										</td>
										<td style="text-align:center;">
											(浓汤)乳脂,番茄等
										</td>
										<td style="text-align:center;">
											#FFE4C4
										</td>
										<td style="text-align:center;">
											255,228,196
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff8c00" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkOrange
										</td>
										<td style="text-align:center;">
											深橙色
										</td>
										<td style="text-align:center;">
											#FF8C00
										</td>
										<td style="text-align:center;">
											255,140,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#faf0e6" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Linen
										</td>
										<td style="text-align:center;">
											亚麻布
										</td>
										<td style="text-align:center;">
											#FAF0E6
										</td>
										<td style="text-align:center;">
											250,240,230
										</td>
									</tr>
									<tr>
										<td bgcolor="#cd853f" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Peru
										</td>
										<td style="text-align:center;">
											秘鲁
										</td>
										<td style="text-align:center;">
											#CD853F
										</td>
										<td style="text-align:center;">
											205,133,63
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffdab9" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											PeachPuff
										</td>
										<td style="text-align:center;">
											桃色
										</td>
										<td style="text-align:center;">
											#FFDAB9
										</td>
										<td style="text-align:center;">
											255,218,185
										</td>
									</tr>
									<tr>
										<td bgcolor="#f4a460" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SandyBrown
										</td>
										<td style="text-align:center;">
											沙棕色
										</td>
										<td style="text-align:center;">
											#F4A460
										</td>
										<td style="text-align:center;">
											244,164,96
										</td>
									</tr>
									<tr>
										<td bgcolor="#d2691e" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Chocolate
										</td>
										<td style="text-align:center;">
											巧克力
										</td>
										<td style="text-align:center;">
											#D2691E
										</td>
										<td style="text-align:center;">
											210,105,30
										</td>
									</tr>
									<tr>
										<td bgcolor="#8b4513" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SaddleBrown
										</td>
										<td style="text-align:center;">
											马鞍棕色
										</td>
										<td style="text-align:center;">
											#8B4513
										</td>
										<td style="text-align:center;">
											139,69,19
										</td>
									</tr>
									<tr>
										<td bgcolor="#fff5ee" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											SeaShell
										</td>
										<td style="text-align:center;">
											海贝壳
										</td>
										<td style="text-align:center;">
											#FFF5EE
										</td>
										<td style="text-align:center;">
											255,245,238
										</td>
									</tr>
									<tr>
										<td bgcolor="#a0522d" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Sienna
										</td>
										<td style="text-align:center;">
											黄土赭色
										</td>
										<td style="text-align:center;">
											#A0522D
										</td>
										<td style="text-align:center;">
											160,82,45
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffa07a" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightSalmon
										</td>
										<td style="text-align:center;">
											浅鲜肉(鲑鱼)色
										</td>
										<td style="text-align:center;">
											#FFA07A
										</td>
										<td style="text-align:center;">
											255,160,122
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff7f50" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Coral
										</td>
										<td style="text-align:center;">
											珊瑚
										</td>
										<td style="text-align:center;">
											#FF7F50
										</td>
										<td style="text-align:center;">
											255,127,80
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff4500" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											OrangeRed
										</td>
										<td style="text-align:center;">
											橙红色
										</td>
										<td style="text-align:center;">
											#FF4500
										</td>
										<td style="text-align:center;">
											255,69,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#e9967a" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkSalmon
										</td>
										<td style="text-align:center;">
											深鲜肉(鲑鱼)色
										</td>
										<td style="text-align:center;">
											#E9967A
										</td>
										<td style="text-align:center;">
											233,150,122
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff6347" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Tomato
										</td>
										<td style="text-align:center;">
											番茄
										</td>
										<td style="text-align:center;">
											#FF6347
										</td>
										<td style="text-align:center;">
											255,99,71
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffe4e1" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											MistyRose
										</td>
										<td style="text-align:center;">
											薄雾玫瑰
										</td>
										<td style="text-align:center;">
											#FFE4E1
										</td>
										<td style="text-align:center;">
											255,228,225
										</td>
									</tr>
									<tr>
										<td bgcolor="#fa8072" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Salmon
										</td>
										<td style="text-align:center;">
											鲜肉(鲑鱼)色
										</td>
										<td style="text-align:center;">
											#FA8072
										</td>
										<td style="text-align:center;">
											250,128,114
										</td>
									</tr>
									<tr>
										<td bgcolor="#fffafa" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Snow
										</td>
										<td style="text-align:center;">
											雪
										</td>
										<td style="text-align:center;">
											#FFFAFA
										</td>
										<td style="text-align:center;">
											255,250,250
										</td>
									</tr>
									<tr>
										<td bgcolor="#f08080" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightCoral
										</td>
										<td style="text-align:center;">
											淡珊瑚色
										</td>
										<td style="text-align:center;">
											#F08080
										</td>
										<td style="text-align:center;">
											240,128,128
										</td>
									</tr>
									<tr>
										<td bgcolor="#bc8f8f" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											RosyBrown
										</td>
										<td style="text-align:center;">
											玫瑰棕色
										</td>
										<td style="text-align:center;">
											#BC8F8F
										</td>
										<td style="text-align:center;">
											188,143,143
										</td>
									</tr>
									<tr>
										<td bgcolor="#cd5c5c" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											IndianRed
										</td>
										<td style="text-align:center;">
											印度红
										</td>
										<td style="text-align:center;">
											#CD5C5C
										</td>
										<td style="text-align:center;">
											205,92,92
										</td>
									</tr>
									<tr>
										<td bgcolor="#ff0000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Red
										</td>
										<td style="text-align:center;">
											纯红
										</td>
										<td style="text-align:center;">
											#FF0000
										</td>
										<td style="text-align:center;">
											255,0,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#a52a2a" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Brown
										</td>
										<td style="text-align:center;">
											棕色
										</td>
										<td style="text-align:center;">
											#A52A2A
										</td>
										<td style="text-align:center;">
											165,42,42
										</td>
									</tr>
									<tr>
										<td bgcolor="#b22222" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											FireBrick
										</td>
										<td style="text-align:center;">
											耐火砖
										</td>
										<td style="text-align:center;">
											#B22222
										</td>
										<td style="text-align:center;">
											178,34,34
										</td>
									</tr>
									<tr>
										<td bgcolor="#8b0000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkRed
										</td>
										<td style="text-align:center;">
											深红色
										</td>
										<td style="text-align:center;">
											#8B0000
										</td>
										<td style="text-align:center;">
											139,0,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#800000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Maroon
										</td>
										<td style="text-align:center;">
											栗色
										</td>
										<td style="text-align:center;">
											#800000
										</td>
										<td style="text-align:center;">
											128,0,0
										</td>
									</tr>
									<tr>
										<td bgcolor="#ffffff" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											White
										</td>
										<td style="text-align:center;">
											纯白
										</td>
										<td style="text-align:center;">
											#FFFFFF
										</td>
										<td style="text-align:center;">
											255,255,255
										</td>
									</tr>
									<tr>
										<td bgcolor="#f5f5f5" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											WhiteSmoke
										</td>
										<td style="text-align:center;">
											白烟
										</td>
										<td style="text-align:center;">
											#F5F5F5
										</td>
										<td style="text-align:center;">
											245,245,245
										</td>
									</tr>
									<tr>
										<td bgcolor="#dcdcdc" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Gainsboro
										</td>
										<td style="text-align:center;">
											Gainsboro
										</td>
										<td style="text-align:center;">
											#DCDCDC
										</td>
										<td style="text-align:center;">
											220,220,220
										</td>
									</tr>
									<tr>
										<td bgcolor="#d3d3d3" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											LightGrey
										</td>
										<td style="text-align:center;">
											浅灰色
										</td>
										<td style="text-align:center;">
											#D3D3D3
										</td>
										<td style="text-align:center;">
											211,211,211
										</td>
									</tr>
									<tr>
										<td bgcolor="#c0c0c0" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Silver
										</td>
										<td style="text-align:center;">
											银白色
										</td>
										<td style="text-align:center;">
											#C0C0C0
										</td>
										<td style="text-align:center;">
											192,192,192
										</td>
									</tr>
									<tr>
										<td bgcolor="#a9a9a9" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DarkGray
										</td>
										<td style="text-align:center;">
											深灰色
										</td>
										<td style="text-align:center;">
											#A9A9A9
										</td>
										<td style="text-align:center;">
											169,169,169
										</td>
									</tr>
									<tr>
										<td bgcolor="#808080" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Gray
										</td>
										<td style="text-align:center;">
											灰色
										</td>
										<td style="text-align:center;">
											#808080
										</td>
										<td style="text-align:center;">
											128,128,128
										</td>
									</tr>
									<tr>
										<td bgcolor="#696969" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											DimGray
										</td>
										<td style="text-align:center;">
											暗淡的灰色
										</td>
										<td style="text-align:center;">
											#696969
										</td>
										<td style="text-align:center;">
											105,105,105
										</td>
									</tr>
									<tr>
										<td bgcolor="#000000" style="text-align:center;">
										</td>
										<td style="text-align:center;">
											Black
										</td>
										<td style="text-align:center;">
											纯黑
										</td>
										<td style="text-align:center;">
											#000000
										</td>
										<td style="text-align:center;">
											0,0,0
										</td>
									</tr>
								</tbody>
								</table>
							</div>
						</div>

						<div class="doc-democode doc-codead0 ">

<xmp>
/*
自定义颜色样式，请遵循如下格式
如果觉得麻烦可以使用拼图自定义颜色生成工具
 */
.text-lightpink,
a.text-lightpink:link,
a.text-lightpink:visited,
.button.border-lightpink,
blockquote.border-lightpink,
.pager.border-lightpink a,
.pager-prev.border-lightpink,
.pager-next.border-lightpink {
	color: #FFB6C1;
}
.border-lightpink,
.border-lightpink .button,
.border-lightpink .tab-nav li a,
.border-lightpink .tab-body,
.button.bg-lightpink,
.selected.border-lightpink,
.pointer.border-lightpink li,
.nav.border-lightpink .active a,
.nav.nav-tabs.border-lightpink,
.nav-main.border-lightpink a,
.nav-main.border-lightpink .nav-head,
.pagination.border-lightpink li,
.pager.border-lightpink a {
	border-color: #FFB6C1;
}
.bg-lightpink,
.border-lightpink .button.active,
.pointer.border-lightpink .active,
.nav-pills.border-lightpink .active a,
.nav-lightpink.border-lightpink .nav-head,
.pagination.border-lightpink .active {
	background-color: #FFB6C1;
}
</xmp>
						</div>
						<h4 class="doc-title" id="color-list">配色方案</h4>
						<div class="doc-input">
							常用的一些配色方案，仅供参考。当然也可以使用：<a class="tag bg-yellow" href="/tools/setcolor.html" target="_blank">拼图配色工具</a></div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line">
									<div class="x6"><img src="images/color.gif" class="img-responsive radius-small"/></div>
									<div class="x6"><img src="images/color-d.gif" class="img-responsive radius-small"/></div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
...
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="bgborder">
                        背景、边框、圆角
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="bg-color">
                        背景色
                    </h3>
						<p class="doc-readme">
							给元素添加背景色样式，突出或强调信息，实际应用中建议修改为自主定义的颜色。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-bg-color">
									<p class="bg">
										默认：拼图前端框架。</p>
									<p class="bg-main bg-inverse">
										主色：拼图前端框架，是一款开源的专业网页前端UI解决方案。</p>
									<p class="bg-sub bg-inverse">
										辅助色：是HTML、CSS、Javascrip三者结合的前端框架。</p>
									<p class="bg-back">
										背景色：配合js效果，提供了拼图的CSS、HTML标准。</p>
									<p class="bg-mix">
										融合色：方便个性化、人性化的前端设计方法。</p>
									<p class="bg-dot bg-inverse">
										点缀色：受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</p>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="bg">
	默认</p>
<p class="bg-main">
	主色</p>
<p class="bg-sub">
	辅助色</p>
<p class="bg-back">
	背景色</p>
<p class="bg-mix">
	融合色</p>
<p class="bg-dot">
	点缀色</p>
</xmp>
						</div>
						<h4 class="doc-title">
                        黑灰白
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-bg-color">
									<p class="bg-black bg-inverse">
										黑色：拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及JS交互。</p>
									<p class="bg-gray bg-inverse">
										灰色：配合js效果，提供了拼图的CSS、HTML标准。</p>
									<p class="bg-white">
										白色：让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</p>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="bg-black">
	黑色</p>
<p class="bg-gray">
	灰色</p>
<p class="bg-white">
	白色</p>
</xmp>
						</div>
						<h4 class="doc-title">
                        反色
                    </h4>
						<div class="doc-input">
							当使用的背景色为深色时，内部文字需要用白色文本，则加上.bg-inverse，实现文字颜色的处理。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-bg-color">
									<p class="bg-main">
										无反色处理</p>
									<p class="bg-main bg-inverse">
										反色处理</p>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="bg-main">
	无反色处理</p>
<p class="bg-main bg-inverse">
	反色处理</p>
</xmp>
						</div>
						<h3 class="doc-h3" id="bg-notice">
                        提示背景
                    </h3>
						<p class="doc-readme">
							提示背景包含红、黄、蓝、绿四种，分别表示危险、警告、主要、成功三种信号。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-bg-color">
									<p class="bg-red bg-inverse">
										危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。</p>
									<p class="bg-yellow bg-inverse">
										警告：是HTML、CSS、Javascrip三者结合的前端框架。</p>
									<p class="bg-blue bg-inverse">
										主要：方便个性化、人性化的前端设计方法。</p>
									<p class="bg-green bg-inverse">
										成功：配合js效果，提供了拼图的CSS、HTML标准。</p>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="bg-red">
	危险</p>
<p class="bg-yellow">
	警告</p>
<p class="bg-blue">
	主要</p>
<p class="bg-green">
	成功</p>
</xmp>
						</div>
						<h4 class="doc-title">
                        柔和色
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-bg-color">
									<p class="bg-red-light">
										淡红-危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。</p>
									<p class="bg-yellow-light">
										淡黄-警告：是HTML、CSS、Javascrip三者结合的前端框架。</p>
									<p class="bg-blue-light">
										淡蓝-主要：方便个性化、人性化的前端设计方法。</p>
									<p class="bg-green-light">
										淡绿-成功：配合js效果，提供了拼图的CSS、HTML标准。</p>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<p class="bg-red-light">
	淡红-危险</p>
<p class="bg-yellow-light">
	淡黄-警告</p>
<p class="bg-blue-light">
	淡蓝-主要</p>
<p class="bg-green-light">
	淡绿-成功</p>
</xmp>
						</div>
						<h3 class="doc-h3" id="border">
                        边框颜色
                    </h3>
						<p class="doc-readme">
							定义边框颜色。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-border">
									<div class="border">
										边框：默认</div>
									<div class="border border-main">
										边框：主色</div>
									<div class="border border-sub">
										边框：辅色</div>
									<div class="border border-back">
										边框：背景色</div>
									<div class="border border-mix">
										边框：融合色</div>
									<div class="border border-dot">
										边框：点缀色</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="border">
	边框：默认</div>
<div class="border border-main">
	边框：主色</div>
<div class="border border-sub">
	边框：辅色</div>
<div class="border border-back">
	边框：背景色</div>
<div class="border border-mix">
	边框：融合色</div>
<div class="border border-dot">
	边框：点缀色</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        黑灰白
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-border">
									<div class="border border-black">
										边框：黑色</div>
									<div class="border border-gray">
										边框：灰色</div>
									<div class="border border-white">
										边框：白色</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="border border-black">
	边框：黑色</div>
<div class="border border-gray">
	边框：灰色</div>
<div class="border border-white">
	边框：白色</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        提示边框色
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-border">
									<div class="border border-red">
										边框：红色</div>
									<div class="border border-yellow">
										边框：黄色</div>
									<div class="border border-blue">
										边框：蓝色</div>
									<div class="border border-green">
										边框：绿色</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="border border-red">
	边框：红色</div>
<div class="border border-yellow">
	边框：黄色</div>
<div class="border border-blue">
	边框：蓝色</div>
<div class="border border-green">
	边框：绿色</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        柔和色
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-border">
									<div class="border border-red-light">
										边框：淡红</div>
									<div class="border border-yellow-light">
										边框：淡黄</div>
									<div class="border border-blue-light">
										边框：淡蓝</div>
									<div class="border border-green-light">
										边框：淡绿</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="border border-red-light">
	边框：淡红</div>
<div class="border border-yellow-light">
	边框：淡黄</div>
<div class="border border-blue-light">
	边框：淡蓝</div>
<div class="border border-green-light">
	边框：淡绿</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="border-style">
                        边框大小、位置及样式
                    </h3>
						<p class="doc-readme">
							设置边框的大小粗细、上下左右的位置及不同的样式效果。</p>
						<h4 class="doc-title">
                        边框大小
                    </h4>
						<div class="doc-input">
							边框大小分为默认(1px)、无边框(none)、小边框.border-little(2px)、中边框.border-middle(3px)、大边框.boder-big(5px)、超大边框.border-large(10px)。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-border">
									<div class="border">
										默认边框</div>
									<div class="border border-none">
										没有边框</div>
									<div class="border border-small">
										小边框</div>
									<div class="border border-middle">
										中边框</div>
									<div class="border border-big">
										大边框</div>
									<div class="border border-large">
										超大边框</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="border">
	默认边框</div>
<div class="border border-small">
	小边框</div>
<div class="border border-middle">
	中边框</div>
<div class="border border-big">
	大边框</div>
<div class="border border-large">
	超大边框</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        边框位置
                    </h4>
						<div class="doc-input">
							边框所在的上、右、下、左及左右、上下位置。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-border">
									<div class="border-small border-top">
										上边框</div>
									<div class="border-small border-right">
										右边框</div>
									<div class="border-small border-bottom">
										下边框</div>
									<div class="border-small border-left">
										左边框</div>
									<div class="border-small border-top-bottom">
										上下边框</div>
									<div class="border-small border-left-right">
										左右边框</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="border-small border-top">
	上边框</div>
<div class="border-small border-right">
	右边框</div>
<div class="border-small border-bottom">
	下边框</div>
<div class="border-small border-left">
	左边框</div>
<div class="border-small border-top-bottom">
	上下边框</div>
<div class="border-small border-left-right">
	左右边框</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        边框样式
                    </h4>
						<div class="doc-input">
							边框的样式，如虚线(.border-dashed)、点(.border-dotted)、双线(.border-double)、内凹(.border-inset)、外凸(.border-outset)等边框效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-border">
									<div class="border border-small border-dashed">
										虚线边框</div>
									<div class="border border-small border-dotted">
										点边框</div>
									<div class="border border-small border-double">
										双线边框</div>
									<div class="border border-small border-inset">
										内凹边框</div>
									<div class="border border-small border-outset">
										外凸边框</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="border border-small border-dashed">
	虚线边框</div>
<div class="border border-small border-dotted">
	点边框</div>
<div class="border border-small border-double">
	双线边框</div>
<div class="border border-small border-inset">
	内凹边框</div>
<div class="border border-small border-outset">
	外凸边框</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        组合效果
                    </h4>
						<div class="doc-input">
							大小、位置、样式三种样式可以组合使用，调配成想要的效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-border">
									<div class="border-green border-top-bottom border-dotted">
										绿色上下点边框</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="border-green border-top-bottom border-dotted">
	绿色上下点边框</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="bg-radius">
                        圆角
                    </h3>
						<p class="doc-readme">
							添加圆角.radius，小圆角.radius-small，大圆角.radius-big，圆.radius-circle样式，可以使背景或边框圆角化。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-radius">
									<div class="border bg radius-none">
										直角：0px</div>
									<div class="border bg radius-small">
										小圆角：2px</div>
									<div class="border bg radius">
										圆角：4px</div>
									<div class="border bg radius-big">
										大圆角：6px</div>
									<div class="border bg radius-rounded">
										绕圆角：2em</div>
									<div class="border bg radius-circle">
										圆：50%</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="radius-none">
	直角：0px</div>
<div class="radius-small">
	小圆角：2px</div>
<div class="radius">
	圆角：4px</div>
<div class="radius-big">
	大圆角：6px</div>
<div class="radius-rounded">
	绕圆角：2em</div>
<div class="radius-circle">
	圆：50%</div>
</xmp>
						</div>
						<blockquote class="quote border-yellow doc-quoteyellow">
							<strong>在IE8及以下浏览器不支持</strong>
							<p>
								因IE8及以下浏览器不支持CSS3，所以圆角效果不显示，直接显示为直角。radius-none为直角，可以用来消除已有圆角效果的样式。</p>
						</blockquote>
						<br />
						<br />

					<h3 class="doc-h3" id="box-shadow">
                        阴影&nbsp;<span class="tag bg-yellow">新增</span>
                    </h3>
						<p class="doc-readme">
							添加阴影.box-shadow，小阴影.box-shadow-small，大阴影.box-shadow-big，无阴影.box-shadow-none 可覆盖原有阴影样式。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
									<div class="alert box-shadow-none">
										无阴影.box-shadow-none：0px，可以覆盖已有的阴影</div>
									<br>
									<div class="alert box-shadow-small">
										小阴影.box-shadow-small：2px</div>
									<br>
									<div class="alert box-shadow">
										阴影.box-shadow：4px，默认阴影</div>
									<br>
									<div class="alert box-shadow-big">
										大阴影.box-shadow-big：6px</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="alert box-shadow-none">
	无阴影.box-shadow-none：0px，可以覆盖已有的阴影</div>
<br>
<div class="alert box-shadow-small">
	小阴影.box-shadow-small：2px</div>
<br>
<div class="alert box-shadow">
	阴影.box-shadow：4px，默认阴影</div>
<br>
<div class="alert box-shadow-big">
	大阴影.box-shadow-big：6px</div>
</xmp>
						</div>
						<blockquote class="quote border-yellow doc-quoteyellow">
							<strong>在IE8及以下浏览器不支持</strong>
							<p>
								因IE8及以下浏览器不支持CSS3，所以阴影效果不显示。box-shadow-none，可以用来消除已有阴影效果的样式。</p>
						</blockquote>
						<br>
						<br>
						<h2 class="doc-h2" id="cssbox">
                        边界、填充
                    </h2>
						<p class="doc-lead">
							包含边界(.margin)和填充(.padding)，在理解他们与边框、内容的关系时，应该先了解下CSS的盒子模型。</p>
						<h3 class="doc-h3" id="boxmodel">
                        盒子模型
                    </h3>
						<p class="doc-readme">
							每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；举个箱子例子，最里面的物品(内容)、物品由泡沫(填充)保护着、然后箱子(边框)、最后是箱子离你的距离(边界)，这就是一个完整的盒子模型。</p>
						<div class="doc-input">
							<div class="line">
								<div class="x6 x3-move">
									<div class="bg-inverse text-center">
										<div class="padding bg-green">
											边界：margin
											<div class="padding bg-yellow margin">
												边框：border
												<div class="padding bg-blue margin">
													填充：padding
													<div class="padding bg text-red margin">
														内容：content</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<h3 class="doc-h3" id="border-place">
                        边界位置
                    </h3>
						<p class="doc-readme">
							包含上、右、下、左及四个都有的位置属性，默认的.margin外边距大小为10px。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin bg text-center clearfix">
												默认边界</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin-top bg text-center clearfix">
												上边界</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin-right bg text-center clearfix">
												右边界</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin-bottom bg text-center clearfix">
												下边界</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin-left bg text-center clearfix">
												左边界</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="margin">
	默认边界</div>
<div class="margin-top">
	上边界</div>
<div class="margin-right">
	右边界</div>
<div class="margin-bottom">
	下边界</div>
<div class="margin-left">
	左边界</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="margin-size">
                        边界大小
                    </h3>
						<p class="doc-readme">
							边界大小包含超小边界2px(.margin-little)、小边界5px(.margin-small)、默认边界10px(.margin)、大边界20px(.margin-big)、超大边界30px(.margin-large)五个等级。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin-little bg text-center clearfix">
												超小边界：2px</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin-small bg text-center clearfix">
												小边界：5px</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin bg text-center clearfix">
												默认边界：10px</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin-big bg text-center clearfix">
												大边界：20px</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="margin-large bg text-center clearfix">
												超大边界：30px</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="margin-little">
	超小边界</div>
<div class="margin-small">
	小边界</div>
<div class="margin">
	默认边界</div>
<div class="margin-big">
	大边界</div>
<div class="margin-large">
	超大边界</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        边界的大小和位置
                    </h4>
						<div class="doc-input">
							边界的大小和位置.margin-(大小)-(位置)，可以相互组合成所需要的边界效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-green" style="overflow: hidden;">
											<div class="bg text-center clearfix margin-little-top margin-small-right margin-big-bottom margin-large-left">
												上超小、右小、底大、左超大</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="margin-little-top margin-small-right margin-big-bottom margin-large-left">
	上超小、右小、底大、左超大</div>
</xmp>
						</div>
						<blockquote class="quote border-red doc-quotered">
							<strong>边界兼容</strong> margin-top及margin-bottom由于hasLayout渲染导致无效状态，建议使用padding或者用下面的解决办法。</blockquote>
						<h4 class="doc-title">
                        解决办法
                    </h4>
						<div class="doc-input">
							<ul>
								<li>在父元素加上边框(0，none无效)：border:solid 1px #fff;</li>
								<li>在父级元素加内填充：padding:1px;</li>
								<li>在父级元素加浮动：overflow:hidden;</li>
								<li>该盒子加浮动： float:left; (clear:both;)</li>
								<li>该元素绝对定位：position:absolute;</li>
							</ul>
						</div>
						<h3 class="doc-h3" id="padding-place">
                        填充位置
                    </h3>
						<p class="doc-readme">
							和边界类似，填充也包含上、右、下、左及四个都有的位置属性，默认的.padding外边距大小为10px。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding">
											<div class="bg text-center clearfix">
												默认填充</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-top">
											<div class="bg text-center clearfix">
												上填充</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-right">
											<div class="bg text-center clearfix">
												右填充</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-bottom">
											<div class="bg text-center clearfix">
												下填充</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-left">
											<div class="bg text-center clearfix">
												左填充</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="padding">
	默认填充</div>
<div class="padding-top">
	上填充</div>
<div class="padding-right">
	右填充</div>
<div class="padding-bottom">
	下填充</div>
<div class="padding-left">
	左填充</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="padding-size">
                        填充大小
                    </h3>
						<p class="doc-readme">
							填充大小包含超小填充2px(.padding-little)、小填充5px(.padding-small)、默认填充10px(.padding)、大填充20px(.padding-big)、超大填充30px(.padding-large)五个等级。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-little">
											<div class="bg text-center clearfix">
												超小填充：2px</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-small">
											<div class="bg text-center clearfix">
												小填充：5px</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding">
											<div class="bg text-center clearfix">
												默认填充：10px</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-big">
											<div class="bg text-center clearfix">
												大填充：20px</div>
										</div>
									</div>
								</div>
								<br />
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-large">
											<div class="bg text-center clearfix">
												超大填充：30px</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="padding-little">
	超小填充</div>
<div class="padding-small">
	小填充</div>
<div class="padding">
	默认填充</div>
<div class="padding-big">
	大填充</div>
<div class="padding-large">
	超大填充</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        大小及位置组合
                    </h4>
						<div class="doc-input">
							填充的位置和大小.padding-(大小)-(位置)，可以相互组合成所需要的填充效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line">
									<div class="x6 x3-move">
										<div class="bg-blue padding-little-top padding-small-right padding-big-bottom padding-large-left">
											<div class="bg text-center clearfix">
												上超小、右小、底大、左超大</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="padding-little-top padding-small-right padding-big-bottom padding-large-left">
	上超小、右小、底大、左超大</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="box-demo">
                        盒子示例
                    </h3>
						<p class="doc-readme">
							使用边界、边框、填充三者的内容元素示例。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line">
									<div class="x4 x4-move bg margin padding border">
										边界、边框、填充</div>
								</div>
								<br />
								<div class="line">
									<div class="x4 x4-move bg-yellow-light margin-big-top padding-small-bottom border-middle border-right">
										上大边界、右中边框、下小填充</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="margin padding border">
	边界、边框、填充</div>
<div class="margin-big-top padding-small-bottom border-middle border-right">
	上大边界、右中边框、下小填充</div>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="animation">
                        CSS动画
                    </h2>
						<p class="doc-lead">
							CSS3动画样式，包含渐变，摇晃，震动，旋转等丰富的前端效果。</p>
						<h3 class="doc-h3" id="fade">
                        淡入淡出
                    </h3>
						<p class="doc-readme">
							使元素具备淡入淡出显示效果，点击按钮即可预览动画。</p>
						<h4 class="doc-title">
                        淡入动画
                    </h4>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<button class="doc-animation button bg-red" data-style="fadein">
									淡入.fadein</button>
								<br />
								<br />
								<button class="doc-animation button bg-yellow" data-style="fadein-top">
									上淡入.fadein-top</button>
								<button class="doc-animation button bg-blue" data-style="fadein-right">
									右淡入.fadein-right</button>
								<button class="doc-animation button bg-green" data-style="fadein-bottom">
									下淡入.fadein-bottom</button>
								<button class="doc-animation button bg-black" data-style="fadein-left">
									左淡入.fadein-left</button>
							</div>
						</div>
						<h4 class="doc-title">
                        淡出动画
                    </h4>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<button class="doc-animation button bg-red" data-style="fadeout">
									淡出.fadeout</button>
								<br />
								<br />
								<button class="doc-animation button bg-yellow" data-style="fadeout-top">
									上淡出.fadeout-top</button>
								<button class="doc-animation button bg-blue" data-style="fadeout-right">
									右淡出.fadeout-right</button>
								<button class="doc-animation button bg-green" data-style="fadeout-bottom">
									下淡出.fadeout-bottom</button>
								<button class="doc-animation button bg-black" data-style="fadeout-left">
									左淡出.fadeout-left</button>
							</div>
						</div>
						<blockquote class="quote border-green doc-quote">
							<strong>使用方法</strong> 给元素添加样式即可，如淡入，元素使用.fadein即可。</blockquote>
						<div class="doc-code">
<xmp>
<div class="fadein">
	淡入动画</div> <span class="fadeout">淡出动画</span>
</xmp>
						</div>
						<h3 class="doc-h3" id="stress">
                        强调动画
                    </h3>
						<p class="doc-readme">
							提示的强调CSS动画效果。</p>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<button class="doc-animation button bg-red" data-style="bounce">
									弹跳.bounce</button>
								<button class="doc-animation button bg-yellow" data-style="bouncein">
									弹入.bouncein</button>
								<button class="doc-animation button bg-blue" data-style="bounceout">
									弹出.bounceout</button>
								<button class="doc-animation button bg-green" data-style="rotatein">
									转入.rotatein</button>
								<button class="doc-animation button bg-black" data-style="rotateout">
									转出.rotateout</button>
								<br />
								<br />
								<button class="doc-animation button bg-red" data-style="flash">
									闪烁.flash</button>
								<button class="doc-animation button bg-yellow" data-style="shake">
									震颤.shake</button>
								<button class="doc-animation button bg-blue" data-style="swing">
									摇摆.swing</button>
								<button class="doc-animation button bg-green" data-style="wobble">
									摇晃.wobble</button>
								<button class="doc-animation button bg-black" data-style="ring">
									震铃.ring</button>
							</div>
						</div>
						<h4 class="doc-title">
                        悬浮效果
                    </h4>
						<div class="doc-input">
							鼠标悬浮即可实现相关效果。</div>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<button class="button bg bounce-hover">
									弹跳.bounce-hover</button>
								<br />
								<br />
								<button class="button bg-red flash-hover">
									闪烁.flash-hover</button>
								<button class="button bg-yellow shake-hover">
									震颤.shake-hover</button>
								<button class="button bg-blue swing-hover">
									摇摆.swing-hover</button>
								<button class="button bg-green wobble-hover">
									摇晃.wobble-hover</button>
								<button class="button bg-black ring-hover">
									震铃.ring-hover</button>
							</div>
						</div>
						<h3 class="doc-h3" id="rotate">
                        旋转
                    </h3>
						<p class="doc-readme">
							持续旋转动画。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								旋转： <span class="icon-asterisk rotate"></span><span class="icon-refresh rotate">
                            </span>
								<br />
								<br /> 悬浮旋转： <span class="icon-cog rotate-hover"></span><span class="icon-spinner rotate-hover">
                            </span>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<span class="icon-asterisk rotate"></span>
<span class="icon-refresh rotate"></span>
<span class="icon-cog rotate-hover"></span>
<span class="icon-spinner rotate-hover"></span>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="hr">
                        水平线
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="hr-line">
                        水平线
                    </h3>
						<p class="doc-readme">
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								水平线：
								<hr /> 空白的水平线：
								<hr class="space" />
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<hr />
<hr class="space" />
</xmp>
						</div>
						<h3 class="doc-h3" id="hr-color">
                        颜色
                    </h3>
						<p class="doc-readme">
							可以结合背景色，改变水平线的颜色。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								默认
								<hr /> 主色
								<hr class="bg-main" /> 辅色
								<hr class="bg-sub" /> 背景色
								<hr class="bg-back" /> 融合色
								<hr class="bg-mix" /> 点缀色
								<hr class="bg-dot" /> 黑色
								<hr class="bg-black" /> 灰色
								<hr class="bg-gray" /> 白色
								<hr class="bg-white" /> 红色
								<hr class="bg-red" /> 黄色
								<hr class="bg-yellow" /> 蓝色
								<hr class="bg-blue" /> 绿色
								<hr class="bg-green" />
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<hr />
<hr class="bg-main" />
<hr class="bg-sub" />
<hr class="bg-back" />
<hr class="bg-mix" />
<hr class="bg-dot" />
<hr class="bg-black" />
<hr class="bg-gray" />
<hr class="bg-white" />
<hr class="bg-red" />
<hr class="bg-yellow" />
<hr class="bg-blue" />
<hr class="bg-green" />
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="image">
                        图片
                    </h2>
						<p class="doc-lead">
							定义图片样式，形状等样式。</p>
						<h3 class="doc-h3" id="image-style">
                        图片样式
                    </h3>
						<p class="doc-readme">
							使用.radius-(*)样式，可以给图片快速添加效果，改变图片样式。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<img src="images/128.png" width="128" height="128" class="radius-small" />
								<img src="images/128.png" width="128" height="128" class="radius" />
								<img src="images/128.png" width="128" height="128" class="radius-big" />
								<img src="images/128.png" width="128" height="128" class="radius-circle" />
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<img src="images/128.png" width="128" height="128" class="radius-small" />
<img src="images/128.png" width="128" height="128" class="radius" />
<img src="images/128.png" width="128" height="128" class="radius-big" />
<img src="images/128.png" width="128" height="128" class="radius-circle" />
</xmp>
						</div>
						<blockquote class="quote border-yellow doc-quoteyellow">
							<strong>IE兼容</strong> IE6,7,8不支持CSS3，不支持圆角效果，直接用直角显示。</blockquote>
						<h4 class="doc-title">
                        图片外边框
                    </h4>
						<div class="doc-input">
							使用.img-border样式，给图片添加外边框效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<img src="images/128.png" width="128" height="128" class="img-border radius-small" />
								<img src="images/128.png" width="128" height="128" class="img-border radius" />
								<img src="images/128.png" width="128" height="128" class="img-border radius-big" />
								<img src="images/128.png" width="128" height="128" class="img-border radius-circle" />
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<img src="..." width="128" height="128" class="img-border radius-small" />
<img src="..." width="128" height="128" class="img-border radius" />
<img src="..." width="128" height="128" class="img-border radius-big" />
<img src="..." width="128" height="128" class="img-border radius-circle" />
</xmp>
						</div>
						<h4 class="doc-title">
                        填充边距
                    </h4>
						<div class="doc-input">
							使用padding-(*)系列样式，可以改变图片外边框的填充边距。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<img src="images/128.png" width="128" height="128" class="img-border radius-small padding-little" />
								<img src="images/128.png" width="128" height="128" class="img-border radius padding-small" />
								<img src="images/128.png" width="128" height="128" class="img-border radius-big padding" />
								<img src="images/128.png" width="128" height="128" class="img-border radius-circle padding-big" />
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<img src="..." width="128" height="128" class="img-border radius-small padding-little" />
<img src="..." width="128" height="128" class="img-border radius padding-small" />
<img src="..." width="128" height="128" class="img-border radius-big padding" />
<img src="..." width="128" height="128" class="img-border radius-circle padding-big" />
</xmp>
						</div>
						<h4 class="doc-title">
                        边框颜色
                    </h4>
						<div class="doc-input">
							可以添加border-(*)边框，改变边框颜色。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<img src="images/64.png" width="64" height="64" class="img-border border-red radius-small" />
								<img src="images/64.png" width="64" height="64" class="img-border border-yellow radius" />
								<img src="images/64.png" width="64" height="64" class="img-border border-blue radius-big" />
								<img src="images/64.png" width="64" height="64" class="img-border border-green radius-circle" />
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<img src="..." class="img-border border-red radius-small" />
<img src="..." class="img-border border-yellow radius" />
<img src="..." class="img-border border-blue radius-big" />
<img src="..." class="img-border border-green radius-circle" />
</xmp>
						</div>
						<h3 class="doc-h3" id="img-responsive">
                        响应式图片
                    </h3>
						<p class="doc-readme">
							为了让图片更友好显示，拼图框架设置了响应式图片，让图片宽度为100%；可按比例缩放，但不超过父元素，</p>
						<div class="doc-code">
<xmp>
<img src="..." class="img-responsive" alt="响应式图片" />
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="form">
                        表单
                    </h2>
						<p class="doc-lead">
							表单输入框、浏览文件、选项按钮等基本效果；多个表单元素使用及表单验证请查看"元件"下的"表单组"及"JS组件"下的"表单验证"文档。</p>
						<h3 class="doc-h3" id="input">
                        输入框
                    </h3>
						<p class="doc-readme">
							输入框</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<input type="text" class="input" placeholder="文本框" />
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<input type="text" class="input" placeholder="文本框" />
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        带label的输入框
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<label class="label">
										账号</label>
									<input type="text" class="input" placeholder="用户名/邮箱/手机" />
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<label class="label">
		账号</label>
	<input type="text" class="input" placeholder="用户名/邮箱/手机" />
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        多行文本框
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<label class="label">
										多行文本框</label>
									<textarea rows="5" class="input" placeholder="多行文本框"></textarea>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<label class="label">
		多行文本框</label>
	<textarea rows="5" class="input" placeholder="多行文本框"></textarea>
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="file">
                        浏览文件
                    </h3>
						<p class="doc-readme">
							浏览文件</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file"
                                name="logo" />
                            </a>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" /></a>
</form>
</xmp>
						</div>
						<blockquote class="quote border-green doc-quote">
							<strong>多颜色效果</strong> a链接标签同时可以使用按钮的相关样式，如.border-main,.bg-main等。</blockquote>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<a class="button input-file bg-green" href="javascript:void(0);">+ 浏览文件<input size="100"
                                type="file" name="logo" />
                            </a>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<a class="button input-file bg-green" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" name="logo" /></a>
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="select">
                        下拉菜单
                    </h3>
						<p class="doc-readme">
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<label class="label">
										拼图框架：</label>
									<select class="input">
										<option>起步</option>
										<option>CSS</option>
										<option>元件</option>
										<option>模块</option>
										<option>javascript组件</option>
									</select>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<label class="label">
		拼图框架：</label>
	<select class="input">
		<option>起步</option>
		<option>CSS</option>
		<option>元件</option>
		<option>模块</option>
		<option>javascript组件</option>
	</select>
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="radio-checkbox">
                        单选多选
                    </h3>
						<p class="doc-readme">
						</p>
						<h4 class="doc-title">
                        单选框
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<label>
										<input type="radio">拼图框架
									</label>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<label>
		<input type="radio">拼图框架
	</label>
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        多选框
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<label>
										<input type="checkbox">拼图框架
									</label>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<label>
		<input type="checkbox">拼图框架
	</label>
</form>
</xmp>
						</div>
						<blockquote class="quote border-yellow doc-quoteyellow">
							<strong>按钮样式</strong> 单选或多选也可以采用按钮的形式，通过js来控制样式，详情参考"JS组件"的单选多选。</blockquote>
						<h4 class="doc-title">
                        按钮式单选或多选
                    </h4>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<div class="button-group radio">
									<label class="button active">
										<input name="pintuer" value="yes" checked="checked" type="radio">是
									</label>
									<label class="button">
										<input name="pintuer" value="no" type="radio">否
									</label>
								</div>
								<br />
								<br />
								<div class="button-group checkbox">
									<label class="button active">
										<input name="pintuer" value="1" type="checkbox" checked="checked">起步
									</label>
									<label class="button">
										<input name="pintuer" value="2" type="checkbox">CSS
									</label>
									<label class="button">
										<input name="pintuer" value="3" type="checkbox">元件
									</label>
								</div>
							</div>
						</div>
						<h3 class="doc-h3" id="form-status">
                        状态
                    </h3>
						<p class="doc-readme">
						</p>
						<h4 class="doc-title">
                        焦点状态
                    </h4>
						<div class="doc-input">
							当选择或输入时的样式效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<input type="text" id="doc-input-focus" class="input" size="30" placeholder="焦点状态效果" />
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<input type="text" id="doc-input-focus" class="input" size="30" placeholder="焦点状态效果" />
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        禁用状态
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<input type="text" size="30" class="input" disabled="disabled" placeholder="禁用状态效果" />
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<input type="text" size="30" class="input" disabled="disabled" placeholder="禁用状态效果" />
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="form-size">
                        尺寸
                    </h3>
						<p class="doc-readme">
							通过input-big,input-small设置不同的大号及小号输入框。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<input type="text" class="input input-big" size="20" placeholder="大号输入框" />
									<hr class="space">
									<input type="text" size="20" class="input" placeholder="默认输入框" />
									<hr class="space">
									<input type="text" class="input input-small" size="20" placeholder="小号输入框" />
									<hr class="space">
									<select class="input input-big">
										<option>大号选择框</option>
									</select>
									<hr class="space">
									<select class="input">
										<option>默认选择框</option>
									</select>
									<hr class="space">
									<select class="input input-small">
										<option>小号选择框</option>
									</select>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<input type="text" class="input input-big" size="20" placeholder="大号输入框" />
	<input type="text" size="20" class="input" placeholder="默认输入框" />
	<input type="text" class="input input-small" size="20" placeholder="小号输入框" />
	<select class="input input-big">
		<option>大号选择框</option>
	</select>
	<select class="input">
		<option>默认选择框</option>
	</select>
	<select class="input input-small">
		<option>小号选择框</option>
	</select>
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="form-style">
                        颜色及圆角效果
                    </h3>
						<p class="doc-readme">
							给输入框架上.border-(*)及.bg-(*)样式，可以改变其边框及背景颜色；深色背景时需要同时加上.bg-inverse改变文本的颜色。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<input type="text" class="input border-yellow-light bg-yellow-light" placeholder="文本框" />
									<br />
									<input type="text" class="input border-green bg-green bg-inverse" placeholder="文本框" />
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<input type="text" class="input border-yellow-light bg-yellow-light" placeholder="文本框" />
	<input type="text" class="input border-green bg-green bg-inverse" placeholder="文本框" />
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        直角或圆角
                    </h4>
						<div class="doc-input">
							去除圆角请添加.radius-none样式，半圆角添加.radius-rounded样式。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form>
									<input type="text" class="input radius-none" placeholder="文本框" />
									<br />
									<input type="text" class="input radius-rounded" placeholder="文本框" />
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<input type="text" class="input radius-none" placeholder="文本框" />
	<input type="text" class="input radius-rounded" placeholder="文本框" />
</form>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="button">
                        按钮
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="button-style">
                        按钮样式
                    </h3>
						<p class="doc-readme">
							结合背景.bg-(*)和边框border-(*)的样式，添加至按钮中，可快速改变其颜色及背景。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button">
									默认</button>
								<button class="button border-main">
									主色</button>
								<button class="button border-sub">
									辅色</button>
								<button class="button border-back">
									背景色</button>
								<button class="button border-mix">
									融合色</button>
								<button class="button border-dot">
									点缀色</button>
								<button class="button border-black">
									黑色</button>
								<button class="button border-gray">
									灰色</button>
								<button class="button border-white">
									白色</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button">
	默认</button>
<button class="button border-main">
	主色</button>
<button class="button border-sub">
	辅色</button>
<button class="button border-back">
	背景色</button>
<button class="button border-mix">
	融合色</button>
<button class="button border-dot">
	点缀色</button>
<button class="button border-black">
	黑色</button>
<button class="button border-gray">
	灰色</button>
<button class="button border-white">
	白色</button>
</xmp>
						</div>
						<h4 class="doc-title">
                        背景色按钮
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button bg">
									默认</button>
								<button class="button bg-main">
									主色</button>
								<button class="button bg-sub">
									辅色</button>
								<button class="button bg-back">
									背景色</button>
								<button class="button bg-mix">
									融合色</button>
								<button class="button bg-dot">
									点缀色</button>
								<button class="button bg-black">
									黑色</button>
								<button class="button bg-gray">
									灰色</button>
								<button class="button bg-white">
									白色</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button bg">
	默认</button>
<button class="button bg-main">
	主色</button>
<button class="button bg-sub">
	辅色</button>
<button class="button bg-back">
	背景色</button>
<button class="button bg-mix">
	融合色</button>
<button class="button bg-dot">
	点缀色</button>
<button class="button bg-black">
	黑色</button>
<button class="button bg-gray">
	灰色</button>
<button class="button bg-white">
	白色</button>
</xmp>
						</div>
						<h4 class="doc-title">
                        提示按钮
                    </h4>
						<div class="doc-input">
							包含危险、警告、主要、成功等样式。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button border-red">
									危险</button>
								<button class="button border-yellow">
									警告</button>
								<button class="button border-blue">
									主要</button>
								<button class="button border-green">
									成功</button>
								<button class="button border-red-light">
									危险</button>
								<button class="button border-yellow-light">
									警告</button>
								<button class="button border-blue-light">
									主要</button>
								<button class="button border-green-light">
									成功</button>
								<br />
								<br />
								<button class="button bg-red">
									危险</button>
								<button class="button bg-yellow">
									警告</button>
								<button class="button bg-blue">
									主要</button>
								<button class="button bg-green">
									成功</button>
								<button class="button bg-red-light">
									危险</button>
								<button class="button bg-yellow-light">
									警告</button>
								<button class="button bg-blue-light">
									主要</button>
								<button class="button bg-green-light">
									成功</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button border-red">
	危险</button>
<button class="button border-yellow">
	警告</button>
<button class="button border-blue">
	主要</button>
<button class="button border-green">
	成功</button>
<button class="button border-red-light">
	危险</button>
<button class="button border-yellow-light">
	警告</button>
<button class="button border-blue-light">
	主要</button>
<button class="button border-green-light">
	成功</button>
<button class="button bg-red">
	危险</button>
<button class="button bg-yellow">
	警告</button>
<button class="button bg-blue">
	主要</button>
<button class="button bg-green">
	成功</button>
<button class="button bg-red-light">
	危险</button>
<button class="button bg-yellow-light">
	警告</button>
<button class="button bg-blue-light">
	主要</button>
<button class="button bg-green-light">
	成功</button>
</xmp>
						</div>
						<h4 class="doc-title">
                        直角和圆角按钮
                    </h4>
						<div class="doc-input">
							使用.radius-(*)圆角系列样式，可以改变按钮的圆角形状。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button bg-main radius-none">
									直角按钮</button>
								<button class="button bg-sub radius-rounded">
									圆角按钮</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button bg-main radius-none">
	直角按钮</button>
<button class="button bg-sub radius-rounded">
	圆角按钮</button>
</xmp>
						</div>
						<h3 class="doc-h3" id="button-size">
                        按钮尺寸
                    </h3>
						<p class="doc-readme">
							通过button-large,button-big,button-small,button-little设置不同的大小。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button button-large">
									特大尺寸按钮</button>
								<br />
								<br />
								<button class="button button-big">
									大尺寸按钮</button>
								<br />
								<br />
								<button class="button">
									默认尺寸按钮</button>
								<br />
								<br />
								<button class="button button-small">
									小尺寸按钮</button>
								<br />
								<br />
								<button class="button button-little">
									特小尺寸按钮</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button button-large">
	...</button>
<button class="button button-big">
	...</button>
<button class="button">
	...</button>
<button class="button button-small">
	...</button>
<button class="button button-little">
	...</button>
</xmp>
						</div>
						<h4 class="doc-title">
                        按钮块
                    </h4>
						<div class="doc-input">
							给按钮添加.button-block样式，按钮的宽即为100%，不超过其父元素宽。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button button-block">
									按钮块效果</button>
								<br />
								<button class="button bg-dot button-big button-block">
									按钮块效果</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button button-block">
	...</button>
<button class="button bg-dot button-big button-block">
	...</button>
</xmp>
						</div>
						<h3 class="doc-h3" id="disabled">
                        禁用效果
                    </h3>
						<p class="doc-readme">
							通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button type="button" class="button border-main" disabled="disabled">
									禁用效果</button>
								<button type="button" class="button bg-main" disabled="disabled">
									禁用效果</button>
								<button type="button" class="button " disabled="disabled">
									禁用效果</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button type="button" class="button border-main" disabled="disabled">
	禁用效果</button>
<button type="button" class="button bg-main" disabled="disabled">
	禁用效果</button>
<button type="button" class="button " disabled="disabled">
	禁用效果</button>
</xmp>
						</div>
						<h3 class="doc-h3" id="button-use">
                        可用元素
                    </h3>
						<p class="doc-readme">
							按钮样式可以于button,input,a等元素。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button">
									button按钮效果</button>
								<input class="button" type="button" value="input按钮效果" />
								<a class="button" href="#">链接a按钮效果</a>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button">
	button按钮效果</button>
<input class="button" type="button" value="input按钮效果" /> <a class="button" href="#">链接a按钮效果</a>
</xmp>
						</div>
						<h4 class="doc-title">
                        带图标的按钮
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button icon-heart">
									喜欢</button>
								<button class="button">
									<span class="icon-search"></span>搜索</button>
								<button class="button">
									<span class="icon-spinner rotate"></span>加载</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button icon-heart">喜欢</button>
<button class="button"><span class="icon-search"></span>搜索</button>
<button class="button"><span class="icon-spinner rotate"></span>加载</button>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="list">
                        列表
                    </h2>
						<p class="doc-lead">
							包含无序列表、有序列表、内联列表、描述列表等效果。</p>
						<h3 class="doc-h3" id="ul">
                        无序列表
                    </h3>
						<p class="doc-readme">
							顺序不重要的排序</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul>
									<li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
									<li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
									<li>配合js效果，提供了拼图的CSS、HTML标准。</li>
									<li>方便个性化、人性化的前端设计方法。</li>
									<li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
										<ul>
											<li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
											<li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
											<li>配合js效果，提供了拼图的CSS、HTML标准。</li>
											<li>方便个性化、人性化的前端设计方法。</li>
											<li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</li>
										</ul>
									</li>
									<li>拼图框架提供了CSS的重定义、元件样式的预设。</li>
									<li>拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。</li>
									<li>丰富了页面效果，同时让前端设计简单化、傻瓜化。</li>
									<li>任何初学者都可快速建设美观、简洁的页面。</li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul>
	<li>...</li>
</ul>
</xmp>
						</div>
						<h3 class="doc-h3" id="ol">
                        有序列表
                    </h3>
						<p class="doc-readme">
							按顺序排列的内容。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ol>
									<li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
									<li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
									<li>配合js效果，提供了拼图的CSS、HTML标准。</li>
									<li>方便个性化、人性化的前端设计方法。</li>
									<li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</li>
									<li>拼图框架提供了CSS的重定义、元件样式的预设。</li>
									<li>拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。</li>
									<li>丰富了页面效果，同时让前端设计简单化、傻瓜化。</li>
									<li>任何初学者都可快速建设美观、简洁的页面。</li>
								</ol>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ol>
	<li>
		...</li>
</ol>
</xmp>
						</div>
						<div class="doc-input">
							采用中文有序列表，添加样式list-cn，部份浏览器不支持，另外，加上行高样式height-(*)，可以改变列表的行距。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ol class="list-cn height">
									<li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
									<li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
									<li>配合js效果，提供了拼图的CSS、HTML标准。</li>
									<li>方便个性化、人性化的前端设计方法。</li>
									<li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</li>
									<li>拼图框架提供了CSS的重定义、元件样式的预设。</li>
									<li>拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。</li>
									<li>丰富了页面效果，同时让前端设计简单化、傻瓜化。</li>
									<li>任何初学者都可快速建设美观、简洁的页面。</li>
								</ol>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ol class="list-cn height">
	<li>
		...</li>
</ol>
</xmp>
						</div>
						<h4 class="doc-title">
                        字母排序
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ol class="list-alpha">
									<li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
									<li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
									<li>配合js效果，提供了拼图的CSS、HTML标准。</li>
								</ol>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ol class="list-alpha">
	<li>
		...</li>
</ol>
</xmp>
						</div>
						<h3 class="doc-h3" id="unstyle">
                        无样式列表
                    </h3>
						<p class="doc-readme">
							添加list-unstyle样式，可以去除列表样式效果。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="list-unstyle height">
									<li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
									<li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
									<li>配合js效果，提供了拼图的CSS、HTML标准。</li>
									<li>方便个性化、人性化的前端设计方法。</li>
									<li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
										<ul>
											<li>拼图前端框架，是一款开源的专业网页前端UI解决方案。</li>
											<li>是HTML、CSS、Javascrip三者结合的前端框架。</li>
											<li>配合js效果，提供了拼图的CSS、HTML标准。</li>
											<li>方便个性化、人性化的前端设计方法。</li>
											<li>受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</li>
										</ul>
									</li>
									<li>拼图框架提供了CSS的重定义、元件样式的预设。</li>
									<li>拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。</li>
									<li>丰富了页面效果，同时让前端设计简单化、傻瓜化。</li>
									<li>任何初学者都可快速建设美观、简洁的页面。</li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="list-unstyle height">
	<li>...</li>
</ul>
</xmp>
						</div>
						<h3 class="doc-h3" id="list-inline">
                        内联列表
                    </h3>
						<p class="doc-readme">
							通过设置display: inline-block;并添加少量的padding，将所有元素放置于同一列。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="list-inline">
									<li>拼图框架</li>
									<li>起步</li>
									<li>CSS效果</li>
									<li>元件</li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="list-inline">
	<li>...</li>
</ul>
</xmp>
						</div>
						<h3 class="doc-h3" id="dl">
                        描述
                    </h3>
						<p class="doc-readme">
							带有描述内容的列表。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<dl>
									<dt>拼图框架</dt>
									<dd>
										是一款开源的专业网页前端UI解决方案</dd>
									<dt>框架应用</dt>
									<dd>
										配合js效果，提供了拼图的CSS、HTML标准。</dd>
									<dt>广受欢迎</dt>
									<dd>
										受到设计师、前端工程师、程序员及网页设计初学者的喜爱。</dd>
								</dl>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<dl>
	<dt>...</dt>
	<dd>
		...</dd>
</dl>
</xmp>
						</div>
						<h4 class="doc-title">
                        水平排列的描述
                    </h4>
						<div class="doc-input">
							添加样式 dl-inline</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<dl class="dl-inline clearfix">
									<dt>拼图前端框架</dt>
									<dd>
										是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。</dd>
									<dt>学习使用</dt>
									<dd>
										拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</dd>
								</dl>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<dl class="dl-inline clearfix">
	<dt>...</dt>
	<dd>
		...</dd>
</dl>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="table">
                        表格
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="table-list">
                        表格列表
                    </h3>
						<p class="doc-readme">
							加表格添加.table样式，使表格分行。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="table-responsive">
									<table class="table">
										<tr>
											<th>
												起步
											</th>
											<th>
												CSS
											</th>
											<th>
												元件
											</th>
											<th>
												模块
											</th>
										</tr>
										<tr>
											<td>
												下载前端框架
											</td>
											<td>
												文本
											</td>
											<td>
												网格系统
											</td>
											<td>
												框架
											</td>
										</tr>
										<tr>
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td>
												水平线
											</td>
											<td>
												标签
											</td>
											<td>
												Banner
											</td>
										</tr>
										<tr>
											<td>
												响应式布局
											</td>
											<td>
												按钮
											</td>
											<td>
												徽章
											</td>
											<td>
												导航
											</td>
										</tr>
										<tr>
											<td>
												浏览器支持
											</td>
											<td>
												列表
											</td>
											<td>
												进度条
											</td>
											<td>
												面包屑
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<table class="table">
	<tr>
		<th>
			...
		</th>
	</tr>
	<tr>
		<td>
			...
		</td>
	</tr>
</table>
</xmp>
						</div>
						<h3 class="doc-h3" id="table-striped">
                        条纹表格
                    </h3>
						<p class="doc-readme">
							添加table-striped样式，表格每隔行增加背景，IE8以下不支持此效果。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="table-responsive">
									<table class="table table-striped">
										<tr>
											<th>
												起步
											</th>
											<th>
												CSS
											</th>
											<th>
												元件
											</th>
											<th>
												模块
											</th>
										</tr>
										<tr>
											<td>
												下载前端框架
											</td>
											<td>
												文本
											</td>
											<td>
												网格系统
											</td>
											<td>
												框架
											</td>
										</tr>
										<tr>
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td>
												水平线
											</td>
											<td>
												标签
											</td>
											<td>
												Banner
											</td>
										</tr>
										<tr>
											<td>
												响应式布局
											</td>
											<td>
												按钮
											</td>
											<td>
												徽章
											</td>
											<td>
												导航
											</td>
										</tr>
										<tr>
											<td>
												浏览器支持
											</td>
											<td>
												列表
											</td>
											<td>
												进度条
											</td>
											<td>
												面包屑
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<table class="table table-striped">
	<tr>
		<th>
			...
		</th>
	</tr>
	<tr>
		<td>
			...
		</td>
	</tr>
</table>
</xmp>
						</div>
						<h3 class="doc-h3" id="table-bordered">
                        带边框的表格
                    </h3>
						<p class="doc-readme">
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="table-responsive">
									<table class="table table-bordered">
										<tr>
											<th>
												起步
											</th>
											<th>
												CSS
											</th>
											<th>
												元件
											</th>
											<th>
												模块
											</th>
										</tr>
										<tr>
											<td>
												下载前端框架
											</td>
											<td>
												文本
											</td>
											<td>
												网格系统
											</td>
											<td>
												框架
											</td>
										</tr>
										<tr>
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td>
												水平线
											</td>
											<td>
												标签
											</td>
											<td>
												Banner
											</td>
										</tr>
										<tr>
											<td>
												响应式布局
											</td>
											<td>
												按钮
											</td>
											<td>
												徽章
											</td>
											<td>
												导航
											</td>
										</tr>
										<tr>
											<td>
												浏览器支持
											</td>
											<td>
												列表
											</td>
											<td>
												进度条
											</td>
											<td>
												面包屑
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<table class="table table-bordered">
	<tr>
		<th>
			...
		</th>
	</tr>
	<tr>
		<td>
			...
		</td>
	</tr>
</table>
</xmp>
						</div>
						<h3 class="doc-h3" id="table-hover">
                        鼠标悬停
                    </h3>
						<p class="doc-readme">
							鼠标悬停时显示当前行的背景色。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="table-responsive">
									<table class="table table-hover">
										<tr>
											<th>
												起步
											</th>
											<th>
												CSS
											</th>
											<th>
												元件
											</th>
											<th>
												模块
											</th>
										</tr>
										<tr>
											<td>
												下载前端框架
											</td>
											<td>
												文本
											</td>
											<td>
												网格系统
											</td>
											<td>
												框架
											</td>
										</tr>
										<tr>
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td>
												水平线
											</td>
											<td>
												标签
											</td>
											<td>
												Banner
											</td>
										</tr>
										<tr>
											<td>
												响应式布局
											</td>
											<td>
												按钮
											</td>
											<td>
												徽章
											</td>
											<td>
												导航
											</td>
										</tr>
										<tr>
											<td>
												浏览器支持
											</td>
											<td>
												列表
											</td>
											<td>
												进度条
											</td>
											<td>
												面包屑
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<table class="table table-hover">
	<tr>
		<th>
			...
		</th>
	</tr>
	<tr>
		<td>
			...
		</td>
	</tr>
</table>
</xmp>
						</div>
						<h3 class="doc-h3" id="table-condensed">
                        紧缩表格
                    </h3>
						<p class="doc-readme">
							添加.table-condensed样式，减少表格间距。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="table-responsive">
									<table class="table table-condensed">
										<tr>
											<th>
												起步
											</th>
											<th>
												CSS
											</th>
											<th>
												元件
											</th>
											<th>
												模块
											</th>
										</tr>
										<tr>
											<td>
												下载前端框架
											</td>
											<td>
												文本
											</td>
											<td>
												网格系统
											</td>
											<td>
												框架
											</td>
										</tr>
										<tr>
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td>
												水平线
											</td>
											<td>
												标签
											</td>
											<td>
												Banner
											</td>
										</tr>
										<tr>
											<td>
												响应式布局
											</td>
											<td>
												按钮
											</td>
											<td>
												徽章
											</td>
											<td>
												导航
											</td>
										</tr>
										<tr>
											<td>
												浏览器支持
											</td>
											<td>
												列表
											</td>
											<td>
												进度条
											</td>
											<td>
												面包屑
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<table class="table table-condensed">
	<tr>
		<th>
			...
		</th>
	</tr>
	<tr>
		<td>
			...
		</td>
	</tr>
</table>
</xmp>
						</div>
						<h3 class="doc-h3" id="table-bg">
                        单元格背景
                    </h3>
						<p class="doc-readme">
							含当前.current，红.red，黄.yellow，蓝.blue，绿.green五种色彩。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="table-responsive">
									<table class="table">
										<tr class="current">
											<th>
												起步
											</th>
											<th>
												CSS
											</th>
											<th>
												元件
											</th>
											<th>
												模块
											</th>
											<th>
												JS组件
											</th>
										</tr>
										<tr>
											<td class="current">
												下载前端框架
											</td>
											<td>
												文本
											</td>
											<td>
												网格系统
											</td>
											<td>
												框架
											</td>
											<td>
												概述
											</td>
										</tr>
										<tr class="red">
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
											<td>
												窗口工具
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td class="red">
												水平线
											</td>
											<td>
												标签
											</td>
											<td>
												Banner
											</td>
											<td>
												选项标签
											</td>
										</tr>
										<tr class="yellow">
											<td>
												响应式布局
											</td>
											<td>
												按钮
											</td>
											<td>
												徽章
											</td>
											<td>
												导航
											</td>
											<td>
												对话框
											</td>
										</tr>
										<tr>
											<td>
												浏览器支持
											</td>
											<td>
												列表
											</td>
											<td class="yellow">
												进度条
											</td>
											<td>
												面包屑
											</td>
											<td>
												提示
											</td>
										</tr>
										<tr class="blue">
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
											<td>
												警告框
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td>
												水平线
											</td>
											<td>
												标签
											</td>
											<td class="blue">
												Banner
											</td>
											<td>
												表单验证
											</td>
										</tr>
										<tr class="green">
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
											<td>
												警告框
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td>
												水平线
											</td>
											<td>
												标签
											</td>
											<td>
												Banner
											</td>
											<td class="green">
												表单验证
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<table>
	<!--行-->
	<tr class="current">
		<td>
			...
		</td>
	</tr>
	<tr class="red">
		<td>
			...
		</td>
	</tr>
	<tr class="yellow">
		<td>
			...
		</td>
	</tr>
	<tr class="blue">
		<td>
			...
		</td>
	</tr>
	<tr class="green">
		<td>
			...
		</td>
	</tr>
	<!--单元格-->
	<tr>
		<td class="current">
			>...
		</td>
	</tr>
	<tr>
		<td class="red">
			...
		</td>
	</tr>
	<tr>
		<td class="yellow">
			...
		</td>
	</tr>
	<tr>
		<td class="blue">
			...
		</td>
	</tr>
	<tr>
		<td class="green">
			...
		</td>
	</tr>
</table>
</xmp>
						</div>
						<h3 class="doc-h3" id="table-responsive">
                        响应式表格-默认
                    </h3>
						<p class="doc-readme">
							将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="table-responsive">
									<table class="table table-bordered">
										<tr>
											<th>
												起步
											</th>
											<th>
												CSS
											</th>
											<th>
												元件
											</th>
											<th>
												模块
											</th>
										</tr>
										<tr>
											<td>
												下载前端框架
											</td>
											<td>
												文本
											</td>
											<td>
												网格系统
											</td>
											<td>
												框架
											</td>
										</tr>
										<tr>
											<td>
												框架包含的文件
											</td>
											<td>
												图片
											</td>
											<td>
												图标
											</td>
											<td>
												头部
											</td>
										</tr>
										<tr>
											<td>
												基本页面
											</td>
											<td>
												水平线
											</td>
											<td>
												标签
											</td>
											<td>
												Banner
											</td>
										</tr>
										<tr>
											<td>
												响应式布局
											</td>
											<td>
												按钮
											</td>
											<td>
												徽章
											</td>
											<td>
												导航
											</td>
										</tr>
										<tr>
											<td>
												浏览器支持
											</td>
											<td>
												列表
											</td>
											<td>
												进度条
											</td>
											<td>
												面包屑
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="table-responsive">
	<table class="table">
		<tr>
			<th>
				...
			</th>
		</tr>
		<tr>
			<td>
				...
			</td>
		</tr>
	</table>
</div>
</xmp>
						</div>
						<br />
						<br />
						<h3 class="doc-h3" id="table-responsive">
                        响应式表格-移动端纵向显示&nbsp;<span class="tag bg-yellow">新增</span>
                    </h3>
						<p class="doc-readme">
							将任何.table包裹在.table-responsive-y 中即可创建响应式表格，其会在小屏幕设备上（小于800px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失，并且不再纵向排列。 因，响应式表格-移动端纵向显示比较特殊，请严格按照示例中的方式进行编码。
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="table-responsive-y">
									<table class="table table-hover">
										<thead>
											<tr>
												<th>
													起步
												</th>
												<th>
													CSS
												</th>
												<th>
													元件
												</th>
												<th>
													模块
												</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td data-title="起步">
													下载前端框架
												</td>
												<td data-title="CSS">
													文本
												</td>
												<td data-title="元件">
													网格系统
												</td>
												<td data-title="模块">
													框架
												</td>
											</tr>
											<tr>
												<td data-title="起步">
													框架包含的文件
												</td>
												<td data-title="CSS">
													图片
												</td>
												<td data-title="元件">
													图标
												</td>
												<td data-title="模块">
													头部
												</td>
											</tr>
											<tr>
												<td data-title="起步">
													基本页面
												</td>
												<td data-title="CSS">
													水平线
												</td>
												<td data-title="元件">
													标签
												</td>
												<td data-title="模块">
													Banner
												</td>
											</tr>
											<tr>
												<td data-title="起步">
													响应式布局
												</td>
												<td data-title="CSS">
													按钮
												</td>
												<td data-title="元件">
													徽章
												</td>
												<td data-title="模块">
													导航
												</td>
											</tr>
											<tr>
												<td data-title="起步">
													浏览器支持
												</td>
												<td data-title="CSS">
													列表
												</td>
												<td data-title="元件">
													进度条
												</td>
												<td data-title="模块">
													面包屑
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="table-responsive-y">
	<table class="table table-hover">
		<thead>
			<tr>
				<th>
					起步
				</th>
				<th>
					CSS
				</th>
				<th>
					元件
				</th>
				<th>
					模块
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td data-title="起步">
					下载前端框架
				</td>
				<td data-title="CSS">
					文本
				</td>
				<td data-title="元件">
					网格系统
				</td>
				<td data-title="模块">
					框架
				</td>
			</tr>
			<tr>
				<td data-title="起步">
					框架包含的文件
				</td>
				<td data-title="CSS">
					图片
				</td>
				<td data-title="元件">
					图标
				</td>
				<td data-title="模块">
					头部
				</td>
			</tr>
			<tr>
				<td data-title="起步">
					基本页面
				</td>
				<td data-title="CSS">
					水平线
				</td>
				<td data-title="元件">
					标签
				</td>
				<td data-title="模块">
					Banner
				</td>
			</tr>
			<tr>
				<td data-title="起步">
					响应式布局
				</td>
				<td data-title="CSS">
					按钮
				</td>
				<td data-title="元件">
					徽章
				</td>
				<td data-title="模块">
					导航
				</td>
			</tr>
			<tr>
				<td data-title="起步">
					浏览器支持
				</td>
				<td data-title="CSS">
					列表
				</td>
				<td data-title="元件">
					进度条
				</td>
				<td data-title="模块">
					面包屑
				</td>
			</tr>
		</tbody>
	</table>
</div>
</xmp>
						</div>
						<br>
						<br>
						<h2 class="doc-h2" id="quote">
                        引用
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="quote-style">
                        引用样式
                    </h3>
						<p class="doc-readme">
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<blockquote>
									<p>
										拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。</p>
								</blockquote>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<blockquote>
	<p>
		...</p>
</blockquote>
</xmp>
						</div>
						<h4 class="doc-title">
                        配合代码显示
                    </h4>
						<div class="doc-input">
							增加strong及smll标签，有不同的样式效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<blockquote>
									<strong>拼图框架</strong>
									<p>
										拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
									<small>它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法。</small>
								</blockquote>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<blockquote>
	<strong>...</strong>
	<p>
		...</p>
	<small>...</small>
</blockquote>
</xmp>
						</div>
						<h4 class="doc-title">
                        向右对齐效果
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<blockquote class="quote-floatright">
									<strong>拼图框架</strong>
									<p>
										拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
									<small>它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法。</small>
								</blockquote>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<blockquote class="quote-floatright">
	<strong>...</strong>
	<p>
		...</p>
	<small>...</small>
</blockquote>
</xmp>
						</div>
						<h3 class="doc-h3" id="quote-color">
                        引用颜色
                    </h3>
						<p class="doc-readme">
							使用.border-(*)系列样式，可以立即改变引用的边框颜色。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<blockquote class="border-main">
									<strong>拼图前端框架</strong>
									<p>
										拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
								</blockquote>
								<br />
								<blockquote class="border-sub quote-floatright">
									<strong>拼图前端框架</strong>
									<p>
										拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
								</blockquote>
								<br />
								<blockquote class="border-mix">
									<strong>拼图前端框架</strong>
									<p>
										拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
								</blockquote>
								<br />
								<blockquote class="border-back quote-floatright">
									<strong>拼图前端框架</strong>
									<p>
										拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
								</blockquote>
								<br />
								<blockquote class="border-dot">
									<strong>拼图前端框架</strong>
									<p>
										拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。</p>
								</blockquote>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<blockquote class="border-main">
	<strong>...</strong>
	<p>
		...</p>
</blockquote>
<blockquote class="border-main quote-floatright">
	<strong>...</strong>
	<p>
		...</p>
</blockquote>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="float">
                        浮动
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="float-set">
                        设置浮动
                    </h3>
						<p class="doc-readme">
							通过这两个class让页面元素左右浮动。 !important被用来避免某些问题。</p>
						<div class="doc-code">
<xmp>
<div class="float-left">
	...</div>
<div class="float-right">
	...</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="float-clear">
                        清除浮动
                    </h3>
						<p class="doc-readme">
							使用.clearfix清除任意页面元素的浮动。</p>
						<div class="doc-code">
<xmp>
<div class="clearfix">
	...</div>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="display">
                        显示隐藏
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="showhidden">
                        显示和隐藏
                    </h3>
						<p class="doc-readme">
							通过.show 和 .hidden可以强制显示或隐藏元素。这两个class使用了!important以避免冲突，原因和快速浮动类似。</p>
						<div class="doc-code">
<xmp>
<div class="show">
	...</div>
<div class="hidden">
	...</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="print-set">
                        打印显示隐藏
                    </h3>
						<p class="doc-readme">
							使用下面的class可以针对打印机隐藏或显示某些内容</p>
						<div class="doc-code">
<xmp>
<div class="print-show">
	...</div>
<div class="print-hidden">
	...</div>
</xmp>
						</div>
						<br />
						<br />
					<h2 class="doc-h2" id="opacity">
                        透明<span class="tag bg-yellow">新增</span>
                    </h2>
						<p class="doc-lead">
							快速设置层、文字、图片等透明。
						</p>
					<h3 class="doc-h3" id="opacity-bg">
                        背景透明
                    </h3>
                    <p class="doc-readme">
							通过.opacity设置背景是否透明，.opacity 默认，完全透明/.opacity-small 透明20%/.opacity-middle 透明一半/.opacity-big 透明80%/.opacity-none 不透明（用户重置已设置透明度的样式）。
					</p>
					<div class="doc-demoview doc-viewad0">
						<div class="bg-green opacity">完全透明</div>
						<div class="bg-green opacity-small">透明20%</div>
						<div class="bg-green opacity-middle">透明一半</div>
						<div class="bg-green opacity-big">透明80%</div>
						<div class="bg-green opacity-none">不透明</div>
					</div>
					<div class="doc-democode doc-codead0 ">
<xmp>
<div class="bg-green opacity">完全透明</div>
<div class="bg-green opacity-small">透明20%</div>
<div class="bg-green opacity-middle">透明一半</div>
<div class="bg-green opacity-big">透明80%</div>
<div class="bg-green opacity-none">不透明</div>
<!--其他透明度需自行定义，复制如下代码，更改opacity=后的数值即可-->
.opacity-名称自拟{filter:alpha(opacity=100);-moz-opacity:1.0;-khtml-opacity: 1.0;opacity: 1.0;}
</xmp>
					</div>
					<h3 class="doc-h3" id="opacity-font">
                        文字透明
                    </h3>
					<p class="doc-readme">
						通过.opacity设置背景是否透明，.opacity 默认，完全透明/.opacity-small 透明20%/.opacity-middle 透明一半/.opacity-big 透明80%/.opacity-none 不透明（用户重置已设置透明度的样式）。
					</p>
					<div class="doc-demoview doc-viewad0 ">
						<div class="bg-green opacity">完全透明</div>
						<div class="text-green opacity-small">透明20%</div>
						<div class="text-green opacity-middle">透明一半</div>
						<div class="text-green opacity-big">透明80%</div>
						<div class="text-green opacity-none">不透明</div>
					</div>
					<div class="doc-democode doc-codead0 ">
<xmp>
<div class="bg-green opacity">完全透明</div>
<div class="text-green opacity-small">透明20%</div>
<div class="text-green opacity-middle">透明一半</div>
<div class="text-green opacity-big">透明80%</div>
<div class="text-green opacity-none">不透明</div>
<!--其他透明度需自行定义，复制如下代码，更改opacity=后的数值即可-->
.opacity-名称自拟{filter:alpha(opacity=100);-moz-opacity:1.0;-khtml-opacity: 1.0;opacity: 1.0;}
</xmp>
					</div>
					<br />
					<br />
						<br />
						<br />
					</div>
					<!--list.end-->
				</div>
				<div class="hidden-l hidden-s xm3 xb3">
					<div class="sidebar doc-sidebar fadein-left">
						<ul class="sidenav nav spy fixed" data-offset-fixed="320" data-offset-spy="160">
							<li><a href="#overview">概述</a>
								<ul>
									<li><a href="#html5">HTML5文档</a> </li>
									<li><a href="#mobile">移动设备优先</a> </li>
									<li><a href="#container">容器</a> </li>
									<li><a href="#advise">建议的文档模版</a> </li>
								</ul>
							</li>
							<li><a href="#text">文本</a>
								<ul>
									<li><a href="#title">标题文本</a> </li>
									<li><a href="#p">段落文本</a> </li>
									<li><a href="#strong">强调文本</a> </li>
									<li><a href="#text-link">链接文本</a> </li>
									<li><a href="#text-align">文本对齐</a> </li>
									<li><a href="#text-size">文本字号</a> </li>
									<li><a href="#text-color">文本颜色</a> </li>
									<li><a href="#text-height">文本行距</a> </li>
									<li><a href="#text-break">文本换行</a> </li>
									<li><a href="#text-more">文本截断</a> </li>
								</ul>
							</li>
							<li><a href="#color">颜色</a>
								<ul>
									<li><a href="#color-default">自带颜色</a> </li>
									<li><a href="#color-table">自定义颜色</a> </li>
									<li><a href="#color-list">配色方案</a> </li>
								</ul>
							</li>
							<li><a href="#bgborder">背景、边框、圆角、阴影</a>
								<ul>
									<li><a href="#bg-color">背景色</a> </li>
									<li><a href="#bg-notice">提示背景</a> </li>
									<li><a href="#border">边框颜色</a> </li>
									<li><a href="#border-style">边框大小、位置及样式</a> </li>
									<li><a href="#bg-radius">圆角</a> </li>
									<li><a href="#box-shadow">阴影</a> </li>
								</ul>
							</li>
							<li><a href="#cssbox">边界、填充</a>
								<ul>
									<li><a href="#boxmodel">盒子模型</a> </li>
									<li><a href="#border-place">边界位置</a> </li>
									<li><a href="#margin-size">边界大小</a> </li>
									<li><a href="#padding-place">填充位置</a> </li>
									<li><a href="#padding-size">填充大小</a> </li>
									<li><a href="#box-demo">盒子示例</a> </li>
								</ul>
							</li>
							<li><a href="#animation">CSS动画</a>
								<ul>
									<li><a href="#fade">淡入淡出</a> </li>
									<li><a href="#stress">强调动画</a> </li>
									<li><a href="#rotate">旋转</a> </li>
								</ul>
							</li>
							<li><a href="#hr">水平线</a>
								<ul>
									<li><a href="#hr-line">水平线</a> </li>
									<li><a href="#hr-color">颜色</a> </li>
								</ul>
							</li>
							<li><a href="#image">图片</a>
								<ul>
									<li><a href="#image-style">图片样式</a> </li>
									<li><a href="#img-responsive">响应式图片</a> </li>
								</ul>
							</li>
							<li><a href="#form">表单</a>
								<ul>
									<li><a href="#input">输入框</a> </li>
									<li><a href="#file">浏览文件</a> </li>
									<li><a href="#select">下拉菜单</a> </li>
									<li><a href="#radio-checkbox">单选多选</a> </li>
									<li><a href="#form-status">状态</a> </li>
									<li><a href="#form-size">尺寸</a> </li>
									<li><a href="#form-style">颜色及圆角效果</a> </li>
								</ul>
							</li>
							<li><a href="#button">按钮</a>
								<ul>
									<li><a href="#button-style">按钮样式</a> </li>
									<li><a href="#button-size">按钮尺寸</a> </li>
									<li><a href="#disabled">禁用效果</a> </li>
									<li><a href="#button-use">可用元素</a> </li>
								</ul>
							</li>
							<li><a href="#list">列表</a>
								<ul>
									<li><a href="#ul">无序列表</a> </li>
									<li><a href="#ol">有序列表</a> </li>
									<li><a href="#unstyle">无样式列表</a> </li>
									<li><a href="#list-inline">内联列表</a> </li>
									<li><a href="#dl">描述</a> </li>
								</ul>
							</li>
							<li><a href="#table">表格</a>
								<ul>
									<li><a href="#table-list">表格列表</a> </li>
									<li><a href="#table-striped">条纹表格</a> </li>
									<li><a href="#table-bordered">带边框的表格</a> </li>
									<li><a href="#table-hover">鼠标悬停</a> </li>
									<li><a href="#table-condensed">紧缩表格</a> </li>
									<li><a href="#table-bg">单元格背景</a> </li>
									<li><a href="#table-responsive">响应式表格</a> </li>
								</ul>
							</li>
							<li><a href="#quote">引用</a>
								<ul>
									<li><a href="#quote-style">引用样式</a> </li>
									<li><a href="#quote-color">引用颜色</a> </li>
								</ul>
							</li>
							<li><a href="#float">浮动</a>
								<ul>
									<li><a href="#float-set">设置浮动</a> </li>
									<li><a href="#float-clear">清除浮动</a> </li>
								</ul>
							</li>
							<li><a href="#display">显示隐藏</a>
								<ul>
									<li><a href="#showhidden">显示和隐藏</a> </li>
									<li><a href="#print-set">打印显示隐藏</a> </li>
								</ul>
							</li>
							<li><a href="#opacity">透明</a>
								<ul>
									<li><a href="#opacity-bg">背景透明</a> </li>
									<li><a href="#opacity-font">文字透明</a> </li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="container doc-footer">
			版权所有 &copy; <a href="">Pintuer.com</a> All Rights Reserved.</div>
		<div class="doc-backtop win-backtop icon-arrow-circle-up">
		</div>
		<script src="plugins/layer/layer.js"></script>
		<script src="plugins/zclip/jquery.zclip.min.js"></script>

		</div>
	</body>

</html>